.ft-data {
  overflow: hidden;
  position: relative;
  margin-top: 60px;
  margin-bottom: 60px;
  padding-top: 60px;
  padding-bottom: 30px; }
  .ft-data .pdp__sub-header {
    margin-bottom: .5rem; }
  .ft-data .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
    .ft-data .bg__moving {
      position: absolute;
      top: 20%;
      left: 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap; }
    .ft-data .bg__marquee-wrap {
      white-space: nowrap; }
    .ft-data .bg__marquee {
      display: inline-block; }
    .ft-data .bg__tag {
      color: inherit;
      font-size: 2.5rem;
      font-weight: 700;
      white-space: nowrap; }
  .ft-data__pad {
    position: relative;
    padding-left: 20px;
    padding-right: 20px; }
  .ft-data__img {
    position: absolute;
    top: 0;
    width: 55%;
    max-width: 200px;
    z-index: 10; }
    .ft-data__img--sm {
      top: 3.4375rem; }
  .ft-data__cont {
    position: relative;
    padding-top: 60px;
    max-width: 340px;
    margin: 0 auto;
    zoom: 1; }
    .ft-data__cont:before {
      content: '';
      display: block; }
    .ft-data__cont:after {
      content: '';
      display: table;
      clear: both; }
  .ft-data__footer {
    padding-top: 2rem;
    color: #767676;
    font-size: 0.875rem; }
  .ft-data .bubble {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    float: right;
    width: 9.375rem;
    height: 9.375rem;
    padding-top: 8px;
    border-radius: 50%;
    background-color: #fff;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column; }
    .ft-data .bubble__main {
      zoom: 1;
      display: block;
      margin: 0 auto .2em;
      padding-right: 8%;
      color: inherit;
      font-size: 1.3125rem;
      font-weight: 700;
      line-height: 1; }
      .ft-data .bubble__main:before {
        content: '';
        display: block; }
      .ft-data .bubble__main:after {
        content: '';
        display: table;
        clear: both; }
    .ft-data .bubble__num {
      float: left;
      font-size: 1em;
      letter-spacing: -0.06em; }
    .ft-data .bubble__unit {
      float: left;
      margin-top: .4em;
      font-size: 0.9375rem; }
    .ft-data .bubble__arrow {
      float: left;
      position: relative;
      width: 1em;
      height: 1.5em;
      margin-top: -.2em;
      margin-left: -.5em;
      color: inherit;
      font-size: .5em; }
      .ft-data .bubble__arrow::before, .ft-data .bubble__arrow::after {
        content: '';
        position: absolute;
        left: 50%; }
      .ft-data .bubble__arrow::before {
        top: -1em;
        border: 1em solid transparent;
        border-width: 1em .75em;
        border-bottom-color: inherit;
        -webkit-animation: arrow-pillar-up 1s infinite ease;
                animation: arrow-pillar-up 1s infinite ease;
        -webkit-animation-delay: .75s;
                animation-delay: .75s;
        -webkit-transform-origin: 50% 0%;
            -ms-transform-origin: 50% 0%;
                transform-origin: 50% 0%; }
      .ft-data .bubble__arrow::after {
        top: .6em;
        width: 0;
        height: 1.2em;
        margin-left: .35em;
        border-right: .8em solid; }
      .ft-data .bubble__arrow--down::before {
        top: auto;
        bottom: -1.4em;
        border-top-color: inherit;
        border-bottom-color: transparent;
        -webkit-animation: arrow-pillar-down 1s infinite ease;
                animation: arrow-pillar-down 1s infinite ease; }
      .ft-data .bubble__arrow--down::after {
        top: 0; }
    .ft-data .bubble__text {
      display: block;
      width: 80%;
      margin: 0 auto;
      font-size: 0.875rem;
      text-align: center;
      color: #444;
      line-height: 1.2; }
    .ft-data .bubble--small {
      width: 8.75rem;
      height: 8.75rem; }
      .ft-data .bubble--small .bubble__main {
        opacity: .85; }
    .ft-data .bubble--big {
      width: 11.25rem;
      height: 11.25rem; }
      .ft-data .bubble--big .bubble__main {
        font-size: 2.125rem; }
      .ft-data .bubble--big .bubble__unit {
        font-size: 1.3125rem; }
      .ft-data .bubble--big .bubble__text {
        font-size: 0.9375rem; }
    .ft-data .bubble:nth-child(2) {
      margin-top: -20px;
      margin-left: 50%;
      margin-right: 2rem; }
    .ft-data .bubble:nth-child(3) {
      margin-top: -8px; }
    .ft-data .bubble:nth-child(4) {
      margin-top: 50px;
      margin-right: -12px; }
    .ft-data .bubble:nth-child(5) {
      margin-top: -50px;
      margin-right: 15px; }
  .ft-data--only .ft-data__img {
    top: auto;
    bottom: 0; }
  .ft-data--only .bubble:nth-child(2) {
    margin-right: 1rem; }
  .ft-data--speech .ft-data__cont {
    padding-top: 0; }
  .ft-data__center {
    display: block;
    position: relative;
    z-index: 10;
    width: 60%;
    margin: 0 auto -25px; }
  .ft-data .speech {
    position: relative;
    padding: 12px 30px;
    border-radius: 10px;
    background-color: #fff; }
    .ft-data .speech::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 90%;
      width: 0;
      height: 0;
      border: 12px solid transparent;
      border-top-color: #fff;
      border-bottom: 0;
      border-right: 0;
      margin-right: -5px;
      margin-bottom: -12px;
      -webkit-transform: skewX(15deg) rotateY(30deg);
              transform: skewX(15deg) rotateY(30deg); }
    .ft-data .speech__text {
      color: #2b2b2b; }
    .ft-data .speech em {
      font-size: 1.2em;
      font-weight: 700;
      line-height: 1; }
    .ft-data .speech + .speech {
      margin-top: 20px; }
    .ft-data .speech:nth-child(even)::after {
      left: 10%;
      border: 12px solid transparent;
      border-top-color: #fff;
      border-bottom: 0;
      border-left: 0;
      margin-left: -5px;
      margin-bottom: -12px;
      -webkit-transform: skewX(-15deg) rotateY(-30deg);
              transform: skewX(-15deg) rotateY(-30deg); }
  @media (min-width: 45em) {
    .ft-data__cont {
      max-width: 720px; }
    .ft-data .bubble:nth-child(2) {
      margin-top: 20px;
      margin-left: 0;
      margin-right: 0; }
    .ft-data .bubble:nth-child(3) {
      margin-top: -40px;
      margin-right: -15px; }
    .ft-data .bubble:nth-child(4) {
      margin-right: -30px; }
    .ft-data .bubble:nth-child(5) {
      margin-top: -50px;
      margin-right: -40px; }
    .ft-data .bubble:nth-child(6) {
      margin-top: 75px;
      margin-right: -100px; }
    .ft-data__center {
      width: 33%; }
    .ft-data .speech {
      width: 50%;
      margin-left: auto;
      margin-right: auto; } }
  @media (min-width: 60em) {
    .ft-data {
      margin-top: 80px;
      margin-bottom: 80px;
      padding-bottom: 40px; }
      .ft-data .bg__tag {
        font-size: 3rem; }
      .ft-data__pad {
        padding-left: 50px;
        padding-right: 50px; }
      .ft-data__img {
        position: absolute;
        top: auto;
        bottom: 0;
        left: 50%;
        z-index: 10;
        max-width: none;
        width: 40%;
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%); }
      .ft-data__cont {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        width: 32em;
        max-width: none;
        margin: 0 auto;
        padding-top: 4em;
        padding-bottom: 1em;
        font-size: 1.375rem; }
      .ft-data .bubble {
        width: 7.8em;
        height: 7.8em; }
        .ft-data .bubble__main {
          font-size: 2.3125rem; }
        .ft-data .bubble__unit {
          font-size: 1.5rem; }
        .ft-data .bubble__text {
          width: 85%; }
        .ft-data .bubble--small {
          width: 7em;
          height: 7em; }
        .ft-data .bubble--big {
          width: 10em;
          height: 10em; }
          .ft-data .bubble--big .bubble__main {
            margin-top: .25em;
            font-size: 3.1875rem; }
          .ft-data .bubble--big .bubble__unit {
            font-size: 2rem; }
          .ft-data .bubble--big .bubble__text {
            font-size: 0.9375rem; }
        .ft-data .bubble:nth-child(even) {
          float: right;
          clear: right; }
        .ft-data .bubble:nth-child(odd) {
          float: left;
          clear: left; }
        .ft-data .bubble:nth-child(2) {
          position: relative;
          margin-top: 1em;
          margin-left: 0;
          margin-right: 3.5em; }
        .ft-data .bubble:nth-child(3) {
          margin-left: 16%;
          margin-right: 0;
          margin-top: 0; }
        .ft-data .bubble:nth-child(4) {
          float: left;
          clear: left;
          margin-top: -100px;
          margin-left: -50px; }
        .ft-data .bubble:nth-child(5) {
          margin-top: -70px;
          margin-left: 12%; }
        .ft-data .bubble:nth-child(6) {
          margin-top: -120px; }
      .ft-data--only .ft-data__cont {
        padding-top: 0;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center; }
      .ft-data--only .ft-data__img {
        position: static;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none; }
      .ft-data--only .bubble:nth-child(2) {
        margin-top: 0;
        margin-right: 0;
        margin-left: -10%; }
      .ft-data--speech .ft-data__cont {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        display: block;
        width: 28em;
        height: 580px;
        padding-top: 100px; }
      .ft-data__center {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: auto;
        max-height: 100%;
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%); }
      .ft-data .speech {
        float: right;
        width: auto;
        margin-left: auto;
        margin-right: auto;
        padding: 20px 30px;
        font-size: 1rem; }
        .ft-data .speech:nth-child(odd) {
          float: left;
          clear: left; }
        .ft-data .speech:nth-child(even) {
          clear: right; }
        .ft-data .speech:nth-child(3) {
          margin-right: 30px;
          -webkit-transform: translateY(40px);
              -ms-transform: translateY(40px);
                  transform: translateY(40px); }
        .ft-data .speech:nth-child(4) {
          position: relative;
          z-index: 10; }
        .ft-data .speech:nth-child(5) {
          -webkit-transform: translateY(60px);
              -ms-transform: translateY(60px);
                  transform: translateY(60px);
          margin-left: 20px;
          z-index: 10; }
        .ft-data .speech:nth-child(6) {
          margin-right: 20px;
          z-index: 10; }
        .ft-data .speech + .speech {
          margin-top: 40px; }
        .ft-data .speech .u-br {
          display: block; } }
  @media (min-width: 80em) {
    .ft-data .bg__moving {
      top: 200px; }
    .ft-data .bg__tag {
      font-size: 3.5rem; }
    .ft-data__cont {
      padding-top: 6em;
      font-size: 1.625rem; }
    .ft-data__img {
      max-width: 100%;
      width: auto;
      max-height: 100%; }
    .ft-data__footer {
      padding-top: 0; }
    .ft-data .bubble {
      width: 8.2em;
      height: 8.2em; }
      .ft-data .bubble--big {
        width: 10em;
        height: 10em; }
        .ft-data .bubble--big .bubble__main {
          font-size: 4rem; }
        .ft-data .bubble--big .bubble__unit {
          font-size: 2.5rem; }
        .ft-data .bubble--big .bubble__text {
          font-size: 1rem; }
      .ft-data .bubble--small {
        width: 7.2em;
        height: 7.2em; }
      .ft-data .bubble__text {
        font-size: 0.9375rem; }
      .ft-data .bubble:nth-child(3) {
        margin-left: 15%; } }
  @media (min-width: 100em) {
    .ft-data .bg__tag {
      font-size: 4.375rem; }
    .ft-data--speech .ft-data__cont {
      height: 620px;
      padding-top: 150px; }
    .ft-data .speech {
      padding: 25px 30px; }
    .ft-data .bubble {
      width: 15.625rem;
      height: 15.625rem; }
      .ft-data .bubble--big {
        width: 20rem;
        height: 20rem; }
      .ft-data .bubble--small {
        width: 13.75rem;
        height: 13.75rem; }
      .ft-data .bubble:nth-child(2) {
        margin-right: 1.8em; }
      .ft-data .bubble:nth-child(3) {
        margin-left: 11%; }
      .ft-data .bubble:nth-child(4) {
        margin-left: -105px;
        margin-top: -120px; }
      .ft-data .bubble:nth-child(5) {
        margin-left: 10%; } }

@-webkit-keyframes arrow-pillar-up {
  0% {
    -webkit-transform: translateY(-8%);
            transform: translateY(-8%); }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(-8%);
            transform: translateY(-8%); } }

@keyframes arrow-pillar-up {
  0% {
    -webkit-transform: translateY(-8%);
            transform: translateY(-8%); }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(-8%);
            transform: translateY(-8%); } }

@-webkit-keyframes arrow-pillar-down {
  0% {
    -webkit-transform: translateY(8%);
            transform: translateY(8%); }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(8%);
            transform: translateY(8%); } }

@keyframes arrow-pillar-down {
  0% {
    -webkit-transform: translateY(8%);
            transform: translateY(8%); }
  50% {
    -webkit-transform: translateY(0);
            transform: translateY(0); }
  100% {
    -webkit-transform: translateY(8%);
            transform: translateY(8%); } }

.ft-color {
  padding-top: 60px;
  padding-bottom: 60px; }
  @media (min-width: 60em) {
    .ft-color {
      padding-top: 80px;
      padding-bottom: 80px; } }

.ft-div {
  margin-top: 60px;
  margin-bottom: 60px; }
  .ft-div .pdp__desc {
    max-width: 670px;
    margin: 0.9375rem auto; }
    .ft-div .pdp__desc p {
      margin: 0.5em; }
  .ft-div .item__img {
    width: 100%; }
  .ft-div .item__t {
    display: block;
    margin: 0.625rem 0;
    color: #2b2b2b;
    font-size: 1rem;
    text-shadow: 0.04em 0 0.04em currentColor; }
    @supports (-webkit-touch-callout: none) {
      .ft-div .item__t {
        text-shadow: none;
        font-weight: bold; } }
    .Safari .ft-div .item__t {
      text-shadow: none;
      font-weight: bold; }
    .ft-div .item__t-i {
      display: block;
      width: 20px;
      height: 20px;
      margin: 0 auto 1rem auto;
      color: #fff;
      line-height: 20px;
      font-size: 13px;
      background-color: #2b2b2b;
      text-align: center; }
    .ft-div .item__t span {
      font-weight: normal;
      text-shadow: none; }
  .ft-div .item__desc {
    margin: 0 0 1.25rem; }
  .ft-div__t {
    display: block;
    margin: 2.5rem 0 0.9375rem;
    text-align: center; }
  .ft-div__side {
    max-width: 480px;
    margin: 0 auto; }
    .ft-div__side .cover__img {
      width: 100%; }
    .ft-div__side .t {
      display: block;
      margin: 0.3125rem 0 0.3125rem;
      color: #2b2b2b;
      font-size: 1rem;
      font-weight: 400; }
    .ft-div__side .desc {
      margin: 0 0 2.5rem; }
    .ft-div__side--default .cont {
      background-color: #fff; }
  .ft-div__subcont {
    max-width: 300px;
    margin: 0 auto; }
    .ft-div__subcont .row {
      margin-left: -20px;
      margin-right: -20px; }
    .ft-div__subcont .item {
      padding-left: 10px;
      padding-right: 10px; }
      .ft-div__subcont .item .row {
        margin-left: -10px;
        margin-right: -10px; }
      .ft-div__subcont .item__img--frame {
        display: block;
        border: 1px solid #ccc;
        width: 70%;
        margin: 1.25rem auto; }
    .ft-div__subcont + .ft-div__subcont {
      margin-top: 2rem; }
  .ft-div__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-left: -10px;
    margin-right: -10px; }
    .ft-div__list .item {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      width: 50%;
      padding: 0 10px; }
    .ft-div__list--center .item {
      text-align: center; }
    .ft-div__list--three {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      margin-left: -20px;
      margin-right: -20px; }
      .ft-div__list--three .item {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        width: 100%;
        padding: 0 20px; }
        .ft-div__list--three .item__desc {
          word-break: break-all; }
    .ft-div__list--wrap {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      margin-left: -20px;
      margin-right: -20px; }
      .ft-div__list--wrap .item {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px; }
  @media (min-width: 60em) {
    .ft-div {
      margin-top: 80px;
      margin-bottom: 80px; }
      .ft-div__side {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        max-width: none; }
        .ft-div__side .cover {
          width: 50%;
          margin-right: 40px;
          -ms-flex-negative: 0;
              flex-shrink: 0; }
          .ft-div__side .cover__img {
            width: 100%; }
        .ft-div__side .cont {
          display: -ms-flexbox;
          display: -webkit-box;
          display: flex;
          -ms-flex-align: center;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          width: calc(50% - 40px); }
          .ft-div__side .cont__inner {
            max-width: 100%; }
        .ft-div__side:nth-child(odd) {
          -webkit-box-orient: horizontal;
          -webkit-box-direction: reverse;
              -ms-flex-direction: row-reverse;
                  flex-direction: row-reverse; }
          .ft-div__side:nth-child(odd) .cover {
            margin-right: 0;
            margin-left: 40px; }
        .ft-div__side--default {
          -webkit-box-orient: horizontal !important;
          -webkit-box-direction: normal !important;
              -ms-flex-direction: row !important;
                  flex-direction: row !important;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center; }
          .ft-div__side--default .cover {
            margin-left: 0 !important;
            margin-right: 40px !important;
            max-width: 380px; }
      .ft-div__subcont {
        max-width: none; }
      .ft-div__list .item {
        width: 25%; }
      .ft-div__list--three .item {
        width: 33.33333%; }
      .ft-div__list--wrap .item {
        padding-left: 20px;
        padding-right: 20px; } }
  @media (min-width: 80em) {
    .ft-div .pdp__desc {
      margin: 1.875rem auto; }
    .ft-div__t {
      margin: 4.375rem 0 1.875rem; }
    .ft-div__list {
      margin-top: -40px; }
      .ft-div__list .item {
        margin-top: 50px; } }

.ft-how-to {
  padding-top: 60px;
  padding-bottom: 60px; }
  .ft-how-to__desc {
    font-size: 1rem;
    text-align: center;
    word-break: keep-all;
    word-wrap: break-word; }
  .ft-how-to__cover {
    margin: 0 auto 1.25rem;
    text-align: center; }
    .ft-how-to__list + .ft-how-to__cover {
      margin-top: 2.5rem; }
  .ft-how-to__figure {
    max-width: 600px;
    margin: 0 auto 1.25rem; }
    .ft-how-to__figure--center {
      text-align: center; }
  .ft-how-to__caption {
    margin-top: 1em; }
    .ft-how-to__caption--em {
      display: block;
      margin-bottom: 0.3125rem;
      font-size: 1rem;
      color: #2b2b2b;
      font-weight: 700;
      text-transform: uppercase; }
  .ft-how-to__img {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 100%; }
  .ft-how-to__list--center {
    text-align: center; }
    .ft-how-to__list--center li {
      width: 100%; }
  .ft-how-to__side + .ft-how-to__list,
  .ft-how-to__cover + .ft-how-to__list,
  .ft-how-to__figure + .ft-how-to__list,
  .ft-how-to__list + .ft-how-to__figure {
    margin-top: 1.25rem; }
  .ft-how-to__list + .ft-how-to__list {
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid #ddd; }
  .ft-how-to__item {
    max-width: 394px;
    margin: auto; }
    .ft-how-to__item + .ft-how-to__item {
      margin-top: 1.5em; }
    .ft-how-to__item--1of2 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      max-width: none; }
  .ft-how-to__box {
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
    .ft-how-to__item--1of2 .ft-how-to__box {
      width: 50%;
      -ms-flex-negative: 0;
          flex-shrink: 0;
      -ms-flex-item-align: start;
          align-self: flex-start; }
      .ft-how-to__item--1of2 .ft-how-to__box .ft-how-to__img {
        border: 1px solid #ccc; }
      .ft-how-to__item--1of2 .ft-how-to__box + .ft-how-to__cont {
        padding-left: 1.25em;
        padding-right: 0; }
  .ft-how-to__cont {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding-top: 0.625rem; }
    .ft-how-to__item--1of2 .ft-how-to__cont {
      width: 50%;
      padding-right: 1.25em;
      padding-left: 0; }
    .ft-how-to__cont .h {
      display: block;
      margin-bottom: 0.3125rem;
      font-size: 1rem;
      color: #2b2b2b;
      font-weight: 700;
      text-transform: uppercase; }
      .ft-how-to__cont .h:only-child {
        text-align: center; }
    .ft-how-to__cont .text {
      margin: 0; }
  .ft-how-to__img-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-left: -2px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center; }
    .ft-how-to__img-list .ft-how-to__img {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      width: calc(50% - 4px);
      border: 1px solid #ccc;
      margin-left: 4px; }
      .ft-how-to__img-list .ft-how-to__img:nth-child(n+3) {
        margin-top: 4px; }
  .ft-how-to__dl .t {
    margin-top: 15px;
    margin-bottom: 5px;
    color: #2b2b2b;
    font-size: 1rem;
    font-weight: 700; }
  .ft-how-to__item--1of2 .ft-how-to__dl .t:first-child {
    margin-top: 0; }
  .ft-how-to__ol {
    margin-top: 15px; }
    .ft-how-to__ol li {
      list-style-type: decimal;
      margin-left: 18px; }
  .ft-how-to__p {
    margin: 15px auto 0 auto;
    max-width: 600px; }
    .ft-how-to__p--center {
      text-align: center; }
  .ft-how-to__video {
    width: 100%;
    height: auto; }
  .ft-how-to__type5 .image-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-left: -10px; }
    .ft-how-to__type5 .image-container > * {
      margin-left: 10px; }
  .ft-how-to__type5 .desc {
    margin-top: 1em; }
  @media (min-width: 35em) {
    .ft-how-to__list, .ft-how-to__side {
      max-width: 394px;
      margin: auto; }
    .ft-how-to__img-list .ft-how-to__img {
      width: calc(25% - 4px); }
      .ft-how-to__img-list .ft-how-to__img:nth-child(n+3) {
        margin-top: 0; }
    .ft-how-to__img-list--a .ft-how-to__img {
      width: calc(50% - 4px); } }
  @media (min-width: 45em) {
    .ft-how-to__img-list {
      margin-left: -15px; }
      .ft-how-to__img-list .ft-how-to__img {
        width: calc(25% - 15px);
        margin-left: 15px; }
    .ft-how-to__dl {
      max-width: 600px;
      margin: 0 auto; }
      .ft-how-to__dl .t {
        margin-top: 30px;
        margin-bottom: 5px; } }
  @media (min-width: 60em) {
    .ft-how-to {
      padding-top: 80px;
      padding-bottom: 80px; }
      .ft-how-to__side {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        max-width: none; }
        .ft-how-to__side .ft-how-to__box {
          width: calc(50% - 15px); }
        .ft-how-to__side .ft-how-to__cont {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          padding-left: 30px; }
      .ft-how-to__desc {
        padding: 0 3.75rem;
        text-align: center;
        word-break: keep-all;
        word-wrap: break-word; }
      .ft-how-to__cover {
        max-width: none; }
      .ft-how-to__list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        max-width: none;
        margin-top: 2.5rem; }
        .ft-how-to__list + .ft-how-to__list {
          padding-top: 2.5rem; }
      .ft-how-to__item {
        width: 395px;
        margin-top: 0;
        margin-left: 0; }
        .ft-how-to__item + .ft-how-to__item {
          margin-top: 0; }
        .ft-how-to__item:nth-child(n+3) {
          margin-top: 60px; }
      .ft-how-to__item--1of2 .ft-how-to__box {
        width: 180px; }
      .ft-how-to__cont {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        padding-top: 1.25em; }
        .ft-how-to__item--1of2 .ft-how-to__cont {
          width: calc(100% - 180px);
          padding-left: 1.75em; }
      .ft-how-to__type5 .image-container {
        margin-left: -20px; }
        .ft-how-to__type5 .image-container > * {
          margin-left: 20px; }
      .ft-how-to__type5 .desc {
        margin-top: 1.5em; } }

.ft-proof {
  margin-top: 60px;
  margin-bottom: 60px; }

.proof {
  position: relative;
  max-width: 370px;
  margin: auto;
  color: #fff; }
  .proof + .proof {
    margin-top: 0.625rem; }
  .proof__inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10% 10% 6%; }
    .proof__inner::before, .proof__inner::after {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0; }
    .proof__inner::before {
      top: 30%;
      /*@if is-direction($direction) == false {
    $color-stops: $direction, $color-stops;
    $direction: 180deg;
  }*/
      background: rgba(0, 0, 0, 0);
      background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.6)));
      background: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
      background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0, 0, 0, 0)', endColorstr='rgba(0, 0, 0, 0.6)',GradientType=1 ); }
    .proof__inner::after {
      top: 0;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0);
      -webkit-transition: 0.4s;
      -o-transition: 0.4s;
      transition: 0.4s; }
    .proof__inner.is-active::after {
      background-color: rgba(0, 0, 0, 0.6); }
    .proof__inner.is-active .proof__desc {
      opacity: 1;
      -webkit-transform: translateY(0);
          -ms-transform: translateY(0);
              transform: translateY(0); }
    .proof__inner.is-active .proof__btn .more::after {
      -webkit-transform: translate(-50%, -50%) rotate(0);
          -ms-transform: translate(-50%, -50%) rotate(0);
              transform: translate(-50%, -50%) rotate(0); }
  .proof__desc {
    position: relative;
    z-index: 2;
    opacity: 0;
    font-size: 1rem;
    -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
            transform: translateY(20px);
    -webkit-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s; }
  .proof__cont {
    position: absolute;
    z-index: 2;
    left: 10%;
    right: 10%;
    bottom: 6%;
    font-size: 1rem; }
  .proof__cap {
    color: #fff;
    font-family: "Arita", "Arita Heiti", "Microsoft YaHei", sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase; }
  .proof__t {
    display: block;
    max-width: 75%;
    word-break: keep-all;
    word-wrap: break-word; }
  .proof__btn {
    position: absolute;
    right: 0;
    bottom: 10px;
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    border-radius: 50%; }
    .proof__btn .more::before, .proof__btn .more::after {
      display: inline-block;
      background-color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      width: 18px;
      height: 2px;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      content: ''; }
    .proof__btn .more::after {
      -webkit-transform: translate(-50%, -50%) rotate(-90deg);
          -ms-transform: translate(-50%, -50%) rotate(-90deg);
              transform: translate(-50%, -50%) rotate(-90deg);
      -webkit-transform-origin: center;
          -ms-transform-origin: center;
              transform-origin: center;
      -webkit-transition: -webkit-transform 0.2s;
      transition: -webkit-transform 0.2s;
      -o-transition: transform 0.2s;
      transition: transform 0.2s;
      transition: transform 0.2s, -webkit-transform 0.2s; }

@media (min-width: 60em) {
  .ft-proof {
    margin-top: 80px;
    margin-bottom: 80px; }
  .proof {
    margin: 0;
    width: calc(33.33333% - 14px); }
    .proof + .proof {
      margin-top: 0;
      margin-left: 21px; }
    .proof-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
    .proof__inner {
      padding: 10% 8% 110px; }
    .proof__cont {
      left: 8%;
      right: 8%; } }

@media (min-width: 60em) and (max-width: 79.99em) {
  .ft-proof .wrapper {
    margin: 0 1.25rem; } }

@media (min-width: 80em) {
  .proof {
    width: calc(33.33333% - 22px); }
    .proof + .proof {
      margin-left: 33px; }
    .proof__inner {
      padding: 60px 10% 110px; } }

.ft-shades {
  margin-top: 60px;
  margin-bottom: 60px; }
  .ft-shades__t {
    display: block;
    text-align: center; }
  .ft-shades .swiper-slide {
    width: 40px; }
  .ft-shades .swiper-pagination-bullets {
    bottom: 0; }
  .ft-shades .swiper-pagination-bullet {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 0; }
  .ft-shades__carousel .swiper-pagination-bullets {
    bottom: 0; }
  .ft-shades__carousel .swiper-pagination-bullet {
    width: 40px;
    height: 40px;
    border-radius: 0; }
  .ft-shades__carousel .swiper-slide-prev, .ft-shades__carousel .swiper-slide-next {
    position: relative; }
    .ft-shades__carousel .swiper-slide-prev::before, .ft-shades__carousel .swiper-slide-next::before {
      background-color: #000;
      opacity: 0.3;
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }
  .ft-shades__carousel .swiper-button-next, .ft-shades__carousel .swiper-button-prev {
    display: none; }
  .ft-shades__h, .ft-shades__item {
    position: absolute;
    display: none; }
    .ft-shades__h-box, .ft-shades__item-box {
      position: relative; }
  .ft-shades__h {
    width: 100%;
    color: #000;
    font-weight: 700;
    text-align: center;
    background-color: #fff; }
    .ft-shades__h.is-active {
      display: block; }
    .ft-shades__h-box {
      padding: 0.9375rem 0; }
  .ft-shades__item {
    z-index: 1;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); }
    .ft-shades__item.is-active {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    .ft-shades__item-box {
      margin-top: -3.125rem; }
    .ft-shades__item .color {
      width: 50%;
      width: 130px;
      text-align: center; }
      .ft-shades__item .color__img {
        max-width: 90px;
        margin: 0 auto; }
      .ft-shades__item .color__texture {
        max-width: 90px;
        margin: auto; }
  .ft-shades__compare + .ft-shades__compare {
    padding-top: 4.375rem; }
    .ft-shades__compare + .ft-shades__compare::before {
      content: 'VS';
      display: block;
      margin-bottom: 0.625rem;
      font-family: "Arita", "Arita Heiti", "Microsoft YaHei", sans-serif;
      font-size: 1.1875rem;
      font-weight: 600;
      text-align: center;
      color: #000; }
  .ft-shades__compare--texture {
    padding-bottom: 1.875rem; }
  .ft-shades__compare.has-no-cover .item-color__texture-box {
    position: static; }
  .ft-shades .item-color {
    position: relative;
    background-color: #fff; }
    .ft-shades .item-color__header {
      margin: 0.625rem 0; }
    .ft-shades .item-color__heading {
      display: none;
      width: 100%;
      text-align: center; }
      .ft-shades .item-color__heading:first-child {
        display: block; }
    .ft-shades .item-color__cont--center .item-color__gallery {
      margin: 0 auto;
      padding: 0;
      text-align: center; }
    .ft-shades .item-color__h {
      display: block;
      color: #2b2b2b;
      text-shadow: 0.04em 0 0.04em currentColor; }
      @supports (-webkit-touch-callout: none) {
        .ft-shades .item-color__h {
          text-shadow: none;
          font-weight: bold; } }
      .Safari .ft-shades .item-color__h {
        text-shadow: none;
        font-weight: bold; }
    .ft-shades .item-color__desc {
      margin: 0; }
    .ft-shades .item-color__compare {
      max-width: 660px; }
      .ft-shades .item-color__compare + .item-color__gallery {
        margin-top: 0.625rem; }
    .ft-shades .item-color__thumbs {
      position: relative;
      max-width: 712px;
      margin: auto; }
      .ft-shades .item-color__thumbs .swiper-container {
        padding-top: 5px;
        padding-bottom: 5px; }
      .ft-shades .item-color__thumbs .swiper-button-prev, .ft-shades .item-color__thumbs .swiper-button-next {
        top: 50%; }
        .ft-shades .item-color__thumbs .swiper-button-prev::before, .ft-shades .item-color__thumbs .swiper-button-next::before {
          font-size: 12px;
          color: #5f5f5f; }
      .ft-shades .item-color__thumbs .swiper-button-prev {
        left: -50px; }
        .ft-shades .item-color__thumbs .swiper-button-prev:before {
          content: '\ea02';
          display: inline-block;
          font-family: 'icon';
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          font-style: normal;
          font-variant: normal;
          font-weight: normal;
          text-decoration: none;
          text-transform: none; }
      .ft-shades .item-color__thumbs .swiper-button-next {
        right: -50px; }
        .ft-shades .item-color__thumbs .swiper-button-next:before {
          content: '\ea03';
          display: inline-block;
          font-family: 'icon';
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
          font-style: normal;
          font-variant: normal;
          font-weight: normal;
          text-decoration: none;
          text-transform: none; }
      .ft-shades .item-color__thumbs .swiper-slide {
        position: relative;
        padding: 3px;
        width: 40px;
        cursor: pointer; 
        user-select: none;}
        .ft-shades .item-color__thumbs .swiper-slide:hover, .ft-shades .item-color__thumbs .swiper-slide:focus {
          outline: 1px solid #4477be; }
        .ft-shades .item-color__thumbs .swiper-slide.is-active::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          border: 2px solid #000; }
    .ft-shades .item-color__gallery {
      position: relative;
      max-width: 450px;
      padding-right: 1.625rem; }
      .ft-shades .item-color__gallery:only-child {
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        width: 100%;
        max-width: 580px;
        margin: auto;
        padding: 0; }
        .ft-shades .item-color__gallery:only-child .item-color__texture {
          right: -40px;
          bottom: -90px; }
      .ft-shades .item-color__gallery img {
        opacity: 0;
        -webkit-transition: opacity .2s ease;
        -o-transition: opacity .2s ease;
        transition: opacity .2s ease; }
      .ft-shades .item-color__gallery .swiper-slide-active img {
        opacity: 1; }
      .ft-shades .item-color__gallery--center {
        padding: 0; }
      .item-color__gallery .ft-shades .item-color__gallery .swiper img:only-child {
        padding: 0; }
    .ft-shades .item-color__cover {
      padding-bottom: 4.375rem; }
    .ft-shades .item-color__texture {
      position: absolute;
      right: -68px;
      bottom: -70px;
      display: block;
      max-width: 220px; }
      .ft-shades .item-color__texture-box {
        position: absolute;
        bottom: -10px;
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; }
      .ft-shades .item-color__texture--text {
        width: 50%;
        max-width: 230px;
        text-align: center; }
        .ft-shades .item-color__texture--text:first-child {
          -webkit-transform: translateX(10%);
              -ms-transform: translateX(10%);
                  transform: translateX(10%); }
        .ft-shades .item-color__texture--text:nth-child(2) {
          -webkit-transform: translateX(-10%);
              -ms-transform: translateX(-10%);
                  transform: translateX(-10%); }
        .ft-shades .item-color__texture--text .item-color__t {
          display: block;
          background-color: #fff; }
  .ft-shades__step .step__t {
    display: block;
    margin: 0.625rem 0 0.3125rem;
    color: #2b2b2b;
    font-size: 1rem;
    font-weight: 700; }
  .ft-shades__step .step__desc {
    margin: 0 0 1.875rem; }
  .ft-shades__step .step__img {
    width: 100%; }
  .ft-shades__cont .cover {
    text-align: center; }
    .ft-shades__cont .cover__desc {
      margin: 0.625rem 0; }
    .ft-shades__cont .cover--sm {
      max-width: 580px;
      margin: 0 auto; }

@media (min-width: 45em) {
  .ft-shades__carousel .swiper-button-prev, .ft-shades__carousel .swiper-button-next {
    top: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.5); }
    .ft-shades__carousel .swiper-button-prev::before, .ft-shades__carousel .swiper-button-next::before {
      color: #fff;
      font-size: 0.9375rem; }
  .ft-shades__carousel .swiper-button-prev {
    left: 21%; }
  .ft-shades__carousel .swiper-button-next {
    right: 21%; } }

@media (min-width: 60em) {
  .ft-shades {
    margin-top: 80px;
    margin-bottom: 80px; }
    .ft-shades__t {
      margin: 4.6875rem 0 2.1875rem; }
    .ft-shades__compare--texture {
      padding-bottom: 3.75rem; }
    .ft-shades .item-color__header {
      margin-bottom: 1.5625rem; }
    .ft-shades .item-color__cont {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start; }
    .ft-shades .item-color__compare {
      width: 60%; }
      .ft-shades .item-color__compare + .item-color__gallery {
        margin-top: 3%; }
    .ft-shades .item-color__gallery {
      position: relative;
      max-width: 450px;
      width: 39%;
      margin-top: 3%;
      margin-left: 3.5%; }
      .ft-shades .item-color__gallery:only-child {
        margin: 0; }
        .ft-shades .item-color__gallery:only-child .item-color__texture {
          right: -110px;
          bottom: -110px;
          width: 100%;
          max-width: 340px; }
      .ft-shades .item-color__gallery--full {
        width: 100%;
        max-width: 1120px;
        margin: 0 auto; }
        .ft-shades .item-color__gallery--full .swiper-slide {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: start;
              -ms-flex-align: start;
                  align-items: flex-start; }
        .ft-shades .item-color__gallery--full .item-color__cover {
          width: 63%;
          max-width: 660px; }
        .ft-shades .item-color__gallery--full .item-color__detail {
          display: block;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          width: 37%;
          margin-left: 3.5%; }
          .ft-shades .item-color__gallery--full .item-color__detail img:first-child {
            margin-top: 9.2%; }
          .ft-shades .item-color__gallery--full .item-color__detail .item-color__img:first-child {
            margin-top: 0; }
        .ft-shades .item-color__gallery--full .item-color__img {
          width: 100%;
          max-width: 380px;
          margin-top: 0; }
          .ft-shades .item-color__gallery--full .item-color__img + .item-color__img {
            margin-top: 1.25rem; }
      .ft-shades .item-color__gallery--center {
        padding-right: 0; }
    .ft-shades .item-color__cover {
      padding-bottom: 5rem; }
    .ft-shades .item-color__texture {
      right: -100px;
      bottom: -80px;
      max-width: 320px; }
      .ft-shades .item-color__texture-box {
        bottom: -30px; }
      .ft-shades .item-color__texture--text:first-child {
        -webkit-transform: translateX(15%);
            -ms-transform: translateX(15%);
                transform: translateX(15%); }
      .ft-shades .item-color__texture--text:nth-child(2) {
        -webkit-transform: translateX(-15%);
            -ms-transform: translateX(-15%);
                transform: translateX(-15%); }
      .ft-shades .item-color__texture--text .item-color__t {
        display: block;
        background-color: #fff; }
    .ft-shades__step .step__desc {
      margin: 0 0 3.75rem; } }

@media (min-width: 80em) {
  .ft-shades__carousel .swiper-button-prev {
    left: 27%; }
  .ft-shades__carousel .swiper-button-next {
    right: 27%; }
  .ft-shades .item-color__gallery--full .item-color__cover {
    width: 64%; }
  .ft-shades .item-color__gallery--full .item-color__detail {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    width: 36%; }
    .ft-shades .item-color__gallery--full .item-color__detail .item-color__img:only-child {
      width: 100%; }
  .ft-shades .item-color__gallery--full .item-color__img + .item-color__img {
    margin-left: 3.75rem; } }

.ft-step {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  padding-top: 60px;
  padding-bottom: 30px;
  text-align: center; }
  .ft-step .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }
  .ft-step .parallax-bg {
    position: absolute;
    left: -10%;
    top: 0;
    width: 140%;
    height: 100%;
    background-size: cover;
    background-position: center; }
  .ft-step__link {
    display: block;
    position: relative;
    margin-bottom: 3em; }
    .ft-step__link::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 95px;
      width: 100%;
      border-bottom: 2px solid #4477be; }
    .ft-step__link::after {
      content: '';
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      position: absolute;
      left: 50%;
      width: 8px;
      height: 8px;
      bottom: 95px;
      border-radius: 50%;
      margin-bottom: -3px;
      margin-left: -4px;
      background-color: #4477be; }
    .ft-step__link.is-current::after {
      width: 16px;
      height: 16px;
      border: 2px solid #4477be;
      margin-left: -8px;
      margin-bottom: -7px;
      background-color: #fff; }
    .ft-step__link.is-current .ft-step__cap {
      background-color: #4477be;
      color: #fff; }
    .ft-step__link.is-current .ft-step__name {
      color: #000; }
  .ft-step .swiper-container {
    overflow: visible; }
  .ft-step .swiper-slide:first-child .ft-step__link::before, .ft-step .swiper-slide:last-child .ft-step__link::before {
    width: 1000%; }
  .ft-step .swiper-slide:first-child .ft-step__link::before {
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); }
  .ft-step__controller {
    display: none; }
  .ft-step__thumb {
    position: relative; }
  .ft-step__cap {
    display: inline-block;
    margin-bottom: 40px;
    border-radius: 1em;
    padding: .35em 1em .20em;
    line-height: 1;
    color: #2b2b2b;
    text-transform: uppercase; }
  .ft-step__category {
    color: #5f5f5f;
    font-size: 0.9375rem; }
  .ft-step__name {
    margin-top: 5px;
    height: 2.75em;
    color: #2b2b2b;
    word-break: keep-all;
    word-wrap: break-word; }
  .ft-step__p {
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transform: translate(-50%, 60%);
        -ms-transform: translate(-50%, 60%);
            transform: translate(-50%, 60%);
    min-width: 200px;
    padding-left: 5%;
    padding-right: 5%;
    color: #767676;
    font-size: 0.875rem; }
  .ft-step--has-tab .tabs {
    border: 0; }
    .ft-step--has-tab .tabs::before {
      display: none; }
  .ft-step__tab {
    margin-bottom: 1.25rem; }
    .ft-step__tab__h {
      display: none; }
    .ft-step__tab + .pdp__desc {
      margin-bottom: 0;
      text-align: center; }
    .ft-step__tab .tabs {
      height: auto;
      border: none; }
      .ft-step__tab .tabs::before {
        display: none; }
      .ft-step__tab .tabs-pad {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow-x: visible;
        overflow-y: hidden;
        padding-left: 20px;
        padding-right: 20px; }
        .ft-step__tab .tabs-pad::after {
          content: '';
          display: block;
          width: 20px;
          height: 100%;
          -ms-flex-negative: 0;
              flex-shrink: 0; }
    .ft-step__tab .tab {
      display: block;
      padding: 0.3125rem 0;
      font-size: 1rem;
      line-height: 1;
      white-space: nowrap; }
      .ft-step__tab .tab + .tab {
        margin-left: 1.25rem; }
      .ft-step__tab .tab::before {
        content: '#'; }
      .ft-step__tab .tab.is-active {
        position: relative;
        color: #4477be; }
        .ft-step__tab .tab.is-active::after {
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 2px;
          background-color: #4477be;
          content: ''; }
  .ft-step__container {
    position: relative;
    margin-bottom: -2em;
    padding-top: 2em;
    padding-bottom: 2em; }
  @media (min-width: 60em) {
    .ft-step {
      padding-top: 80px;
      padding-bottom: 80px; }
      .ft-step__carousel {
        width: 800px;
        overflow: visible; }
      .ft-step .swiper-wrapper {
        margin-left: auto;
        margin-right: auto;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center; }
      .ft-step__controller {
        display: block;
        position: absolute;
        margin: 0;
        left: -5px;
        bottom: 4.375rem;
        width: 150px;
        text-align: left;
        z-index: 10; }
      .ft-step__button-prev:before {
        content: '\ea02';
        display: inline-block;
        font-family: 'icon';
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        text-decoration: none;
        text-transform: none;
        left: -1px; }
      .ft-step__button-next:before {
        content: '\ea03';
        display: inline-block;
        font-family: 'icon';
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        text-decoration: none;
        text-transform: none;
        left: 1px; }
      .ft-step__button-prev, .ft-step__button-next {
        position: relative;
        display: inline-block;
        padding: 10px 19px;
        border: 1px solid #4477be;
        border-radius: 50%;
        cursor: pointer; }
        .ft-step__button-prev + .ft-step__button-prev, .ft-step__button-next + .ft-step__button-prev, .ft-step__button-prev + .ft-step__button-next, .ft-step__button-next + .ft-step__button-next {
          margin-left: 8px; }
        .ft-step__button-prev::before, .ft-step__button-next::before {
          position: relative;
          top: 1px;
          color: #4477be; }
        .ft-step__button-prev::after, .ft-step__button-next::after {
          content: '';
          position: absolute;
          top: 1px;
          left: 1px;
          right: 1px;
          bottom: 1px;
          z-index: 1;
          background-color: #fff;
          opacity: 0; }
        .ft-step__button-prev.swiper-button-disabled, .ft-step__button-next.swiper-button-disabled {
          opacity: 0.2;
          pointer-events: none; }
      .ft-step--has-tab .swiper-container {
        position: static; }
      .ft-step--has-tab .swiper-wrapper {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start; }
      .ft-step--has-tab .ft-step__tab {
        position: absolute;
        left: 0;
        top: 15%;
        width: 260px;
        z-index: 2; }
        .ft-step--has-tab .ft-step__tab.has-many-tabs {
          top: 6.6%; }
        .ft-step--has-tab .ft-step__tab__h {
          display: block;
          position: relative;
          margin-bottom: 2.125rem;
          color: #4477be;
          text-align: left; }
        .ft-step--has-tab .ft-step__tab .tabs {
          -webkit-box-pack: start;
              -ms-flex-pack: start;
                  justify-content: flex-start; }
        .ft-step--has-tab .ft-step__tab .tabs-pad {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
          -webkit-box-align: start;
              -ms-flex-align: start;
                  align-items: flex-start;
          padding-left: 0; }
        .ft-step--has-tab .ft-step__tab .tab + .tab {
          margin-left: 0;
          margin-top: 0.625rem; } }
  @media (min-width: 80em) {
    .ft-step__carousel {
      width: 980px; }
    .ft-step__name {
      padding-left: 20px;
      padding-right: 20px; }
    .ft-step .swiper-slide {
      width: 240px; }
    .ft-step--has-tab .ft-step__tab__h {
      margin-bottom: 2.75rem; }
    .ft-step--has-tab .ft-step__tab .tab + .tab {
      margin-top: 0.875rem; } }
  .ft-step .swiper-slide .ft-step__cap, .ft-step .swiper-slide .ft-step__category, .ft-step .swiper-slide .ft-step__name, .ft-step .swiper-slide .ft-step__p, .ft-step .swiper-slide .ft-step__thumb {
    -webkit-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s; }
  @media (max-width: 59.99em) {
    .ft-step .swiper-slide.hide-slide .ft-step__cap, .ft-step .swiper-slide.hide-slide .ft-step__category, .ft-step .swiper-slide.hide-slide .ft-step__name, .ft-step .swiper-slide.hide-slide .ft-step__p {
      opacity: 0; } }
  @media (min-width: 60em) {
    .ft-step .swiper-slide.hide-slide .ft-step__cap, .ft-step .swiper-slide.hide-slide .ft-step__category, .ft-step .swiper-slide.hide-slide .ft-step__name, .ft-step .swiper-slide.hide-slide .ft-step__p, .ft-step .swiper-slide.hide-slide .ft-step__thumb {
      opacity: 0; }
    .ft-step .swiper-slide.hide-slide .ft-step__link {
      cursor: default; }
      .ft-step .swiper-slide.hide-slide .ft-step__link::after {
        opacity: 0; } }

.ft-texture {
  margin-top: 60px;
  margin-bottom: 60px; }
  .ft-texture .u-tc {
    max-width: 640px;
    margin: 0 auto; }
  .ft-texture .pdp__desc {
    max-width: 670px;
    margin-left: auto;
    margin-right: auto; }
  .ft-texture__video {
    width: 100%; }

.texture-compare {
  max-width: 490px;
  margin: auto; }
  .texture-compare__bar {
    position: relative;
    margin: 1.25rem 0 0.9375rem; }
    .texture-compare__bar::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 1px;
      background-color: #ddd; }
    .texture-compare__bar--vs {
      color: #000;
      font-family: "Arita", "Arita Heiti", "Microsoft YaHei", sans-serif;
      font-size: 1.1875rem;
      font-weight: 600;
      letter-spacing: 0.05em;
      text-align: center; }
      .texture-compare__bar--vs::before, .texture-compare__bar--vs::after {
        position: absolute;
        top: 50%;
        width: calc(50% - 30px);
        height: 1px;
        background-color: #ddd;
        content: ''; }
      .texture-compare__bar--vs::before {
        left: 0; }
      .texture-compare__bar--vs::after {
        right: 0; }

.texture__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  z-index: 1; }

.texture__product {
  width: 44%;
  max-width: 170px;
  margin-left: -7%; }

.texture__cont {
  width: 68%;
  max-width: 310px;
  margin-top: 3%;
  margin-left: -5%; }

.texture__cap, .texture__t {
  color: #2b2b2b;
  word-break: keep-all;
  word-wrap: break-word; }

.texture__cap {
  font-size: 1rem; }

.texture__t {
  display: block;
  font-family: "Arita Heiti", "Microsoft YaHei", sans-serif;
  color: #000;
  font-size: 1.1875rem;
  margin-bottom: 0.3125rem; }
  .texture__t--em {
    font-weight: 700; }

.texture__hashtag {
  font-size: 0.9375rem;
  white-space: nowrap; }
  .texture__hashtag::before {
    content: '#'; }

.texture__visual {
  position: relative;
  margin-top: -13%; }

.texture__img {
  width: 100%; }

.texture__gallery {
  max-width: 500px;
  margin: 0 auto;
  text-align: center; }
  .texture__gallery + .ft-how-to__list {
    padding-top: 1.25rem;
    margin-top: 1.25rem;
    border-top: 1px solid #ddd; }
  .texture__gallery + .texture__gallery {
    margin-top: 1.25rem; }

.texture__item + .texture__item {
  margin-top: 0.9375rem; }

.texture__h {
  display: block;
  margin: 2.5rem 0 0.9375rem;
  color: #2b2b2b;
  text-align: center; }

.texture__sub-t {
  display: block;
  margin-top: 0.9375rem;
  color: #2b2b2b;
  font-size: 1rem;
  font-weight: 700; }

.texture__sub-d {
  margin: 0.3125rem 0 0.9375rem; }

@media (min-width: 45em) {
  .texture__product {
    margin-left: 0; }
  .texture__cont {
    margin-top: 7%;
    margin-left: 0; }
  .texture__item + .texture__item {
    margin-top: 0; } }

@media (min-width: 60em) {
  .ft-texture {
    margin-top: 80px;
    margin-bottom: 80px; }
  .texture-compare {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    max-width: none; }
    .texture-compare__bar {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      width: 16.66667%;
      margin: 0; }
      .texture-compare__bar::before {
        top: auto;
        width: 1px;
        height: 100%; }
      .texture-compare__bar--vs::before, .texture-compare__bar--vs::after {
        top: auto;
        width: 1px;
        height: calc(50% - 25px); }
      .texture-compare__bar--vs::before {
        left: 50%;
        top: 0; }
      .texture-compare__bar--vs::after {
        right: 50%;
        bottom: 0; }
  .texture {
    width: 41.66667%; }
    .texture:nth-child(n+4) {
      margin-top: 40px; }
    .texture__header {
      z-index: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    .texture__product {
      margin-left: -7%; }
    .texture__cont {
      margin-top: 0%;
      margin-left: 0; }
    .texture__gallery {
      max-width: none; }
      .texture__gallery + .ft-how-to__list {
        padding-top: 2.5rem; }
      .texture__gallery + .texture__gallery {
        margin-top: 2.5rem; }
    .texture--alt .texture__header {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse; }
    .texture--alt .texture__product {
      margin-left: 0;
      margin-right: -7%; }
    .texture--alt .texture__cont {
      text-align: right; } }

@media (min-width: 80em) {
  .texture__product {
    margin-left: 0; }
  .texture__cont {
    margin-top: 3%; }
  .texture--alt .texture__product {
    margin-right: 0; } }

.ft-tip {
  margin-top: 60px;
  margin-bottom: 60px; }
  .ft-tip .pdp__sub-header {
    padding-left: 20px;
    padding-right: 20px;
    word-break: keep-all;
    word-wrap: break-word; }
  .ft-tip .tab-content {
    background-color: #fff; }
  .ft-tip__desc {
    max-width: 680px;
    margin: 0 auto 0.9375rem;
    padding: 0 20px;
    text-align: center; }
  .ft-tip__sub {
    display: block;
    margin-top: 0.9375rem;
    margin-bottom: 0.3125rem;
    color: #2b2b2b;
    font-size: 1rem;
    font-weight: 700; }
  .ft-tip__tab {
    position: relative;
    margin-bottom: 0.9375rem; }
    .ft-tip__tab::before {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      border-bottom: 1px solid #ddd; }
    .ft-tip__tab--no-border::before {
      display: none; }
    .ft-tip__tab .tabs {
      height: auto;
      border: none; }
      .ft-tip__tab .tabs::before {
        display: none; }
      .ft-tip__tab .tabs-pad {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow-x: visible;
        overflow-y: hidden;
        padding: 0 1.25rem; }
        .ft-tip__tab .tabs-pad::after {
          content: '';
          display: block;
          width: 20px;
          -ms-flex-negative: 0;
              flex-shrink: 0;
          height: 100%; }
    .ft-tip__tab .tab {
      display: block;
      padding: 0.3125rem 0 0.5rem;
      color: #5f5f5f;
      font-size: 1rem;
      line-height: 1;
      white-space: nowrap; }
      .ft-tip__tab .tab + .tab {
        margin-left: 1rem; }
      .ft-tip__tab .tab::before {
        content: '#'; }
      .ft-tip__tab .tab.is-active {
        position: relative;
        color: #4477be; }
        .ft-tip__tab .tab.is-active::after {
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 2px;
          background-color: #4477be; }
  .ft-tip__pad {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    max-width: 820px;
    margin: 0 auto; }
  .ft-tip__cover {
    max-width: 570px;
    margin: 0 auto; }
    .ft-tip__cover .cover {
      margin-bottom: 0.625rem; }
    .ft-tip__cover .ol {
      margin-left: 20px;
      margin-right: 20px; }
  .ft-tip .tip {
    width: 83%;
    max-width: 455px;
    /*
    * 좌우 반전
    */ }
    .ft-tip .tip + .tip {
      margin-top: 0.9375rem; }
    .ft-tip .tip__img {
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      margin-left: -20px;
      zoom: 1; }
      .ft-tip .tip__img:before {
        content: '';
        display: block; }
      .ft-tip .tip__img:after {
        content: '';
        display: table;
        clear: both; }
      .ft-tip .tip__img--double img {
        float: left;
        width: calc(50% - 6px); }
        .ft-tip .tip__img--double img + img {
          margin-left: 12px; }
    .ft-tip .tip__cap {
      display: block;
      margin: 0.625rem 0 0.125rem;
      color: #2b2b2b;
      font-weight: 700;
      font-size: 1rem; }
    .ft-tip .tip__desc {
      margin: 0; }
    .ft-tip .tip--alt {
      margin-left: auto; }
      .ft-tip .tip--alt .tip__img {
        margin-left: 0;
        margin-right: -20px; }
  .ft-tip .tip-list__t {
    display: block;
    margin-top: 5%;
    font-size: 1rem;
    color: #2b2b2b;
    font-weight: 700; }
  .ft-tip .tip-list__desc {
    margin: 0; }
  .ft-tip .tip-list__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; }
    .ft-tip .tip-list__item + .tip-list__item {
      margin-top: 0.625rem; }
  .ft-tip .tip-list__img {
    width: 36%;
    max-width: 180px;
    -ms-flex-item-align: center;
        align-self: center; }
  .ft-tip .tip-list__cont {
    margin-left: 1.25rem;
    max-width: 300px; }
  .ft-tip .face-carousel .swiper-slide {
    display: inline-block;
    width: auto; }
    .ft-tip .face-carousel .swiper-slide:nth-child(1) .face__cont {
      background-color: #f8d9cc; }
    .ft-tip .face-carousel .swiper-slide:nth-child(2) .face__cont {
      background-color: #f6ccba; }
    .ft-tip .face-carousel .swiper-slide:nth-child(3) .face__cont {
      background-color: #edbba5; }
    .ft-tip .face-carousel .swiper-slide:nth-child(4) .face__cont {
      background-color: #ebb096; }
  .ft-tip .face-carousel .face__item {
    max-width: 206px;
    width: calc(100% - 1px); }
  .ft-tip .face-carousel .face__cont {
    margin: 0.0625rem 0 0.625rem;
    padding: 0.75rem 0 0.625rem;
    text-align: center; }
  .ft-tip .face-carousel .face__h {
    display: block;
    color: #2b2b2b; }
  .ft-tip .face-carousel .face__desc {
    margin: 0;
    color: #444; }
  @media (min-width: 45em) {
    .ft-tip__cover {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      max-width: 820px;
      margin-bottom: 3.75rem; }
      .ft-tip__cover .cover {
        max-width: 380px; }
      .ft-tip__cover .ol {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        margin-left: 1.875rem; }
    .ft-tip .tip__img--double img {
      width: calc(50% - 13px); }
    .ft-tip .tip-list__item {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      .ft-tip .tip-list__item + .tip-list__item {
        margin-top: 0rem; }
    .ft-tip .tip-list__img {
      width: 45%; }
    .ft-tip .tip-list__cont {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      width: 48%;
      margin-left: 7%; }
    .ft-tip .tip-list__t {
      margin-top: 1.25rem; } }
  @media (min-width: 60em) {
    .ft-tip {
      margin-top: 80px;
      margin-bottom: 80px; }
      .ft-tip__sub {
        margin-top: 3.4375rem;
        margin-bottom: 1.25rem; }
        .ft-tip__sub:first-of-type {
          margin-top: 2.1875rem; }
      .ft-tip__desc {
        margin-top: 1.875rem;
        margin-bottom: 1.875rem; }
      .ft-tip__tab {
        margin-bottom: 1.5625rem;
        border-bottom: none; }
        .ft-tip__tab .tab {
          padding: 0.3125rem 0 0.3125rem; }
          .ft-tip__tab .tab + .tab {
            margin-left: 2.5rem; }
      .ft-tip__pad {
        margin: auto;
        padding-left: 0;
        padding-right: 0;
        background-color: #fff; }
      .ft-tip__cover .cover {
        margin-bottom: 0; }
      .ft-tip .tip {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        max-width: none;
        /*
      * 좌우 반전
      */ }
        .ft-tip .tip + .tip {
          margin-top: 3.75rem; }
        .ft-tip .tip__img {
          margin-left: 0;
          width: 475px; }
        .ft-tip .tip__cont {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
              -ms-flex-direction: column;
                  flex-direction: column;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
          -webkit-box-sizing: border-box;
                  box-sizing: border-box;
          width: calc(100% - 475px);
          padding-left: 1.875rem; }
        .ft-tip .tip__cap {
          margin: 0 0 0.5rem; }
        .ft-tip .tip--alt {
          margin: 4.0625rem 0 0;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: reverse;
              -ms-flex-direction: row-reverse;
                  flex-direction: row-reverse; }
          .ft-tip .tip--alt .tip__img {
            margin-right: 0; }
          .ft-tip .tip--alt .tip__cont {
            padding-left: 0;
            padding-right: 1.875rem; } }

.ft-hr {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid #ddd; }

.ft-award {
  padding: 2.5rem 0 1.875rem;
  background-size: cover;
  background-repeat: no-repeat; }
  .ft-award .swiper-button-prev, .ft-award .swiper-button-next {
    display: none; }
  .ft-award .swiper-button-prev {
    top: 50%;
    left: 21.5%; }
  .ft-award .swiper-button-next {
    top: 50%;
    right: 21.5%; }
  .ft-award .emblem__t {
    display: block;
    margin-top: 1.25rem;
    text-align: center;
    word-break: keep-all;
    word-wrap: break-word; }

.ft-recommend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 30px 20px;
  padding-top: 1.5625rem;
  padding-bottom: 0.625rem;
  border: 5px solid #f7f7f7;
  text-align: center; }
  .ft-recommend__list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: 1em;
    font-size: 1rem; }
  .ft-recommend__item {
    margin: 6px 8px;
    position: relative;
    color: #444;
    line-height: 1.2; }
    .ft-recommend__item::before {
      content: '';
      display: inline-block;
      position: relative;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background-color: #444;
      top: -2px;
      margin-right: 12px; }

.ft-quote {
  max-width: 620px;
  margin: 60px 20px;
  padding-bottom: 1em;
  border-bottom: 1px solid #ccc;
  text-align: center; }
  .ft-quote__deco {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin-bottom: .55em;
    color: #ccc; }
    .ft-quote__deco::before, .ft-quote__deco::after {
      content: '';
      width: 50%;
      display: block;
      border-bottom: 1px solid; }
    .ft-quote__deco .icon {
      margin: 0 1em;
      font-size: 1.125rem; }
  .ft-quote__msg {
    margin: .5em 0 .5em;
    color: #000;
    font-size: 1.0625rem;
    word-break: keep-all;
    word-wrap: break-word;
    overflow-x: hidden; }
  .ft-quote__footer {
    color: #5f5f5f;
    font-size: 0.9375rem; }

.ft-viral {
  margin-top: 60px;
  margin-bottom: 1.875rem; }
  .ft-viral .pdp__desc {
    padding: 0 20px;
    text-align: center; }
  .ft-viral__title, .ft-viral__sub {
    padding: 0 20px;
    text-align: center;
    line-height: 1.3;
    word-break: keep-all;
    word-wrap: break-word; }
  .ft-viral__sub {
    margin-top: 0.4375rem; }
  .ft-viral__title {
    color: #000;
    font-family: "Arita", "Arita Heiti", "Microsoft YaHei", sans-serif;
    text-align: center; }
  .ft-viral__box {
    margin-top: 1.25rem;
    margin-bottom: 1.25rem; }
  .ft-viral__more {
    margin: 1.25rem; }
    @media (max-width: 34.99em) {
      .ft-viral__more [class*=col-sm-] + [class*=col-sm-] {
        margin-top: 0.625rem; } }
  .ft-viral__video {
    display: block;
    width: 100%; }
  .ft-viral .video-box {
    background-color: #fff; }
  .ft-viral .video-box-subtitle {
    height: auto;
    padding: 2px; }
    .ft-viral .video-box-subtitle::before, .ft-viral .video-box-subtitle::after {
      display: none; }

.ft-mood {
  margin-top: 1.875rem;
  margin-bottom: 60px; }
  .ft-mood__pad {
    margin: 0 20px; }
  .ft-mood__box {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-top: 10px; }
  .ft-mood__img {
    width: 100%; }

.ft-cloud {
  padding-top: 60px;
  padding-bottom: 60px; }
  .ft-cloud__box {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 640px;
    margin: auto;
    padding: 0.625rem 0;
    text-align: center; }
  .ft-cloud__keyword {
    display: inline; }
    .ft-cloud__keyword::before {
      content: '#'; }
  .ft-cloud__carousel {
    margin-top: 1.25rem;
    max-width: 1180px; }
    @media (min-width: 60em) {
      .ft-cloud__carousel {
        margin-top: 1.875rem;
        padding-left: 20px;
        padding-right: 20px; } }
  .ft-cloud__comments {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch; }
    .ft-cloud__comments li {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      position: relative;
      background-color: #fff;
      padding: 4.5rem 2.5rem;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      height: auto;
      text-align: center;
      color: #444;
      font-size: 0.9375rem;
      -ms-flex-item-align: stretch;
          align-self: stretch; }
    @media (min-width: 60em) {
      .ft-cloud__comments li {
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
        width: 33.3333%;
        font-size: 1.0625rem; }
        .ft-cloud__comments li + li {
          margin-left: 1.25rem; } }
  .ft-cloud__comment {
    position: relative;
    max-width: 100%; }
    .ft-cloud__comment:before {
      content: '\ea1b';
      display: inline-block;
      font-family: 'icon';
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      text-decoration: none;
      text-transform: none;
      position: absolute;
      left: 50%;
      -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
              transform: translateX(-50%);
      font-size: 1.125rem;
      top: -2.3125rem; }
    .ft-cloud__comment:after {
      content: '\ea1b';
      display: inline-block;
      font-family: 'icon';
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      text-decoration: none;
      text-transform: none;
      position: absolute;
      left: 50%;
      -webkit-transform: translateX(-50%);
          -ms-transform: translateX(-50%);
              transform: translateX(-50%);
      font-size: 1.125rem;
      -webkit-transform: translateX(-50%) rotateZ(180deg);
          -ms-transform: translateX(-50%) rotate(180deg);
              transform: translateX(-50%) rotateZ(180deg);
      bottom: -2.3125rem; }
  .ft-cloud__submitted-review {
    color: #444;
    font-size: 0.9375rem;
    text-align: center;
    margin-left: 4.0625rem;
    margin-right: 4.0625rem;
    margin-bottom: 0; }
    @media (min-width: 60em) {
      .ft-cloud__submitted-review {
        font-size: 1.0625rem; } }
  .ft-cloud--skincare {
    background-color: #d1e2fc; }
    .ft-cloud--skincare .ft-cloud__comment::before, .ft-cloud--skincare .ft-cloud__comment::after {
      color: #79a3dc; }
  .ft-cloud--makeup {
    background-color: #fde6ec; }
    .ft-cloud--makeup .ft-cloud__comment::before, .ft-cloud--makeup .ft-cloud__comment::after {
      color: #dd4e71; }
  .ft-cloud--homme {
    background-color: #cfdae8; }
    .ft-cloud--homme .ft-cloud__comment::before, .ft-cloud--homme .ft-cloud__comment::after {
      color: #5c5f99; }

.ft-tool {
  margin-top: 60px; }
  .ft-tool__img {
    margin-bottom: 0.9375rem; }
  .ft-tool__cont {
    max-width: 395px;
    margin: auto; }
  .ft-tool__dl {
    counter-reset: tool-order; }
    .ft-tool__dl .h {
      margin-top: 0.9375rem;
      margin-bottom: 0.3125rem;
      color: #2b2b2b;
      font-weight: 700; }
    .ft-tool__dl .part {
      counter-increment: tool-order;
      content: counter(tool-order, upper-alpha);
      display: inline-block;
      width: 25px;
      height: 25px;
      margin-right: 0.5rem;
      background-color: #2b2b2b;
      border-radius: 50%;
      color: #fff;
      font-family: "Arita", "Arita Heiti", "Microsoft YaHei", sans-serif;
      text-align: center; }
    .ft-tool__dl .desc {
      word-break: keep-all;
      word-wrap: break-word; }

.ft-campaign {
  margin-top: 60px;
  padding: 2.8125rem 0;
  color: #fff;
  background-position: 86% 90%;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center; }
  .ft-campaign .pdp__sub-heading {
    color: inherit; }
  .ft-campaign__desc {
    max-width: 400px;
    margin: auto;
    padding: 0 1.875rem;
    font-size: 1rem;
    word-break: keep-all;
    word-wrap: break-word; }

@media (min-width: 35em) {
  .ft-award .swiper-button-prev {
    left: 0; }
  .ft-award .swiper-button-next {
    right: 0; }
  .ft-recommend {
    max-width: 820px;
    width: 75%;
    margin: 40px auto; }
  .ft-quote {
    width: 60%;
    margin: 40px auto; }
    .ft-quote__msg {
      margin-left: 1em;
      margin-right: 1em;
      font-size: 1rem; }
  .ft-mood__pad {
    zoom: 1; }
    .ft-mood__pad:before {
      content: '';
      display: block; }
    .ft-mood__pad:after {
      content: '';
      display: table;
      clear: both; }
  .ft-mood__box {
    width: calc(50% - 10px);
    margin-top: 20px; }
    .ft-mood__box:nth-child(odd) {
      float: left; }
    .ft-mood__box:nth-child(even) {
      float: right; }
    .ft-mood__box:nth-child(2) {
      margin-top: 16%; }
    .ft-mood__box:nth-child(3) {
      padding-left: 15%; }
    .ft-mood__box:nth-child(4) {
      padding-right: 15%; }
    .ft-mood__box:only-child {
      float: none;
      margin-left: auto;
      margin-right: auto; } }

@media (min-width: 45em) {
  .ft-award .swiper-button-prev {
    left: 10.5%; }
  .ft-award .swiper-button-next {
    right: 10.5%; } }

@media (min-width: 60em) {
  .ft-award {
    padding-top: 4.0625rem;
    padding-bottom: 3.125rem; }
    .ft-award__t {
      margin-bottom: 1.875rem; }
    .ft-award .swiper-wrapper {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
    .ft-award .swiper-slide {
      width: auto;
      margin-left: 10px;
      margin-right: 10px; }
    .ft-award .swiper-button-prev, .ft-award .swiper-button-next {
      display: none; }
    .ft-award .emblem {
      width: 140px; }
    .ft-award__carousel--over7 .emblem {
      width: 112px; }
  .ft-quote {
    width: 50%;
    margin-top: 80px;
    margin-bottom: 80px;
    padding-bottom: 36px; }
    .ft-quote__msg {
      margin-top: 1.8em;
      font-size: 1.0625rem; }
  .ft-recommend {
    border-width: 10px;
    padding-top: 2.25rem;
    padding-bottom: 0.875rem; }
    .ft-recommend__list {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      padding-top: 0.5em; }
    .ft-recommend__item + .ft-recommend__item {
      margin-left: 0.625rem; }
  .ft-viral .pdp__desc {
    padding: 0;
    margin-left: auto;
    margin-right: auto; }
  .ft-viral__title {
    margin-bottom: 0.625rem; }
  .ft-viral__box {
    max-width: 1440px;
    margin: 40px auto; }
  .ft-viral__more {
    max-width: 1180px;
    margin: 40px auto; }
    .ft-viral__more .row {
      margin-left: -15px;
      margin-right: -15px; }
    .ft-viral__more [class*=col-] {
      padding-left: 15px;
      padding-right: 15px; }
  .ft-viral__subtitle {
    max-width: 960px;
    margin: 0 auto; }
  .ft-mood__wrap {
    margin-left: 50px;
    margin-right: 50px; }
  .ft-mood__box {
    width: calc(50% - 15px);
    margin-top: 30px; }
  .ft-tool {
    margin-top: 80px;
    padding-bottom: 60px; }
    .ft-tool__cont {
      max-width: none;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    .ft-tool__dl {
      max-width: 340px;
      margin-left: 1.875rem;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
  .ft-campaign {
    margin-top: 80px;
    padding: 7.1875rem 0;
    color: #fff; } }

@media (min-width: 80em) {
  .ft-viral__sub {
    font-size: 1rem; }
  .ft-mood__pad {
    max-width: 1180px;
    margin: 0 auto; } }

.pdp__section--info .accordion {
  border-bottom: 1px solid #eaeaea; }
  .pdp__section--info .accordion__div.is-active .accordion__title::after {
    -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
            transform: rotate(0deg); }
  .pdp__section--info .accordion__title {
    position: relative;
    border-top: 1px solid #eaeaea;
    padding: 0.875rem 20px;
    color: #2b2b2b;
    font-size: 1rem;
    text-transform: capitalize; }
    .pdp__section--info .accordion__title::before, .pdp__section--info .accordion__title::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 20px;
      width: 14px;
      border-bottom: 2px solid;
      color: rgba(0, 0, 0, 0.4);
      -webkit-transition: -webkit-transform .2s;
      transition: -webkit-transform .2s;
      -o-transition: transform .2s;
      transition: transform .2s;
      transition: transform .2s, -webkit-transform .2s; }
    .pdp__section--info .accordion__title::before {
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%); }
    .pdp__section--info .accordion__title::after {
      margin-top: -1px;
      -webkit-transform: rotate(-270deg);
          -ms-transform: rotate(-270deg);
              transform: rotate(-270deg); }
  .pdp__section--info .accordion__content {
    display: inline-block;
    width: 100%;
    padding: 10px 20px 20px;
    font-size: 14px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }

.pdp-ingredient__select {
  width: 100%;
  margin-bottom: 10px; }
  .pdp-ingredient__select .dropdown-selector {
    font-size: 0.875rem; }
  .pdp-ingredient__select .dropdown-options {
    max-height: 150px; }
    .pdp-ingredient__select .dropdown-options a {
      font-size: 0.875rem; }

.ft-look {
  margin-top: 60px;
  margin-bottom: 60px; }
  .ft-look__cover {
    width: calc(100% - 20px);
    margin-left: auto; }
  .ft-look__h, .ft-look__desc {
    display: block;
    padding-left: 20px;
    padding-right: 20px; }
  .ft-look__h {
    text-transform: uppercase;
    margin-top: 1.375rem;
    margin-bottom: 4px;
    letter-spacing: 0.06em; }
  .ft-look__desc {
    word-break: keep-all;
    word-wrap: break-word; }
  .ft-look__cont {
    margin-left: 20px;
    margin-right: 20px; }
  .ft-look__panel {
    overflow: hidden; }
  .ft-look__carousel {
    margin-top: .5rem;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 30px;
    padding-right: 30px; }
    .ft-look__carousel .swiper-button-prev,
    .ft-look__carousel .swiper-button-next {
      width: 40px; }
      .ft-look__carousel .swiper-button-prev::before,
      .ft-look__carousel .swiper-button-next::before {
        font-size: 0.9375rem; }
    .ft-look__carousel .swiper-button-prev {
      left: 0; }
    .ft-look__carousel .swiper-button-next {
      right: 0; }
    .ft-look__carousel .product-item {
      padding-left: .5rem;
      padding-right: .5rem; }

.ft-combine {
  padding: 2.5rem 0 1.25rem;
  background: url(../_temp/makeup/pdp/bg-combine.jpg) no-repeat;
  background-size: cover; }
  .ft-combine__swiper {
    overflow: hidden; }
    .ft-combine__swiper .swiper-pagination {
      margin-top: 1.875rem; }
  .ft-combine__item {
    position: relative;
    display: block; }
    .ft-combine__item .item {
      position: relative;
      display: block; }
      .ft-combine__item .item:first-child {
        position: relative;
        width: 68%;
        max-width: 660px; }
        .ft-combine__item .item:first-child .item__h {
          margin-left: 20px; }
      .ft-combine__item .item:last-child {
        width: 45%;
        max-width: 300px;
        margin-top: -20%;
        margin-right: 20px;
        margin-left: auto; }
      .ft-combine__item .item__h {
        display: block;
        margin-top: 0.625rem;
        color: #444;
        font-weight: 700; }
      .ft-combine__item .item__sub {
        display: none; }
      .ft-combine__item .item__plus {
        position: absolute;
        top: 24%;
        right: -68px;
        width: 48px;
        height: 48px; }
        .ft-combine__item .item__plus::before, .ft-combine__item .item__plus::after {
          position: absolute;
          background-color: #767676;
          content: ''; }
        .ft-combine__item .item__plus::before {
          top: 0;
          left: 50%;
          width: 6px;
          height: 48px;
          margin-left: -3px; }
        .ft-combine__item .item__plus::after {
          top: 50%;
          left: 0;
          width: 48px;
          height: 6px;
          margin-top: -3px; }
  .ft-combine__cont {
    max-width: 230px;
    padding-left: 40px; }
  .ft-combine__h {
    display: block;
    margin: 1.25rem 0 0.3125rem;
    color: #2b2b2b;
    font-size: 1.0625rem; }
  .ft-combine__desc {
    margin: 0;
    word-break: keep-all;
    word-wrap: break-word; }

@media (min-width: 45em) {
  .ft-look .swiper-button-prev::before, .ft-look .swiper-button-next::before {
    font-size: 18px; }
  .ft-combine {
    padding: 5rem 0 3.75rem; }
    .ft-combine__item .item:last-child {
      margin-top: -19.5%;
      margin-left: 52.5%;
      margin-right: 0; }
    .ft-combine__item .item__plus {
      position: absolute;
      top: 17%;
      right: -136px;
      width: 86px;
      height: 86px; }
      .ft-combine__item .item__plus::before {
        width: 10px;
        height: 86px;
        margin-left: -5px; }
      .ft-combine__item .item__plus::after {
        width: 86px;
        height: 10px;
        margin-top: -5px; } }

@media (min-width: 60em) {
  .ft-look {
    margin-top: 80px;
    margin-bottom: 80px; }
    .ft-look__pad {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: reverse;
          -ms-flex-direction: row-reverse;
              flex-direction: row-reverse; }
    .ft-look__cover {
      width: 60%;
      max-width: 660px; }
    .ft-look__cont {
      width: 35%; }
      .ft-look__cont .product-item__name {
        font-size: 0.9375rem; }
    .ft-look__h, .ft-look__desc {
      padding-left: 0;
      padding-right: 0; }
    .ft-look__h {
      margin-top: 0;
      font-size: 1.5rem;
      letter-spacing: 0.05em; }
    .ft-look .ft-tip__tab {
      margin-bottom: 2.5rem; } }

@media (min-width: 80em) {
  .ft-combine__item .item__h, .ft-combine__item .item__sub {
    margin-left: 1.25rem; }
  .ft-combine__item .item__sub {
    display: block;
    font-family: "Arita", "Arita Heiti", "Microsoft YaHei", sans-serif;
    font-size: 13px;
    text-transform: uppercase; }
  .ft-combine__cont {
    position: absolute;
    top: 57%;
    left: 74%;
    padding-left: 0;
    max-width: 280px; }
  .ft-combine__h {
    margin: 0 0 0.625rem; }
  .ft-combine__desc {
    font-size: 1.0625rem; } }

.pdp__header {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  padding: 3.75rem 20px 0;
  text-align: center; }

.pdp__heading {
  margin-top: 0.3125rem;
  margin-bottom: 0.9375rem;
  color: #000;
  line-height: 1.2; }

.pdp__name-main {
  display: block;
  margin-bottom: 0.3125rem;
  font-weight: normal; }

.pdp__name-sub {
  display: block;
  font-family: "Arita", "Arita Heiti", "Microsoft YaHei", sans-serif;
  font-size: 0.9375rem;
  letter-spacing: .05em;
  text-transform: uppercase; }

.pdp__images {
  margin-left: -25%;
  margin-right: -25%; }
  .pdp__images .swiper-slide {
    background-color: #eaeaea; }
    .pdp__images .swiper-slide-active .pdp__img {
      opacity: 1; }
  .pdp__images .swiper-pagination {
    position: relative;
    margin-top: 15px; }

.pdp__img-box {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 100%; }

.pdp__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: .4;
  -webkit-transition: opacity .3s ease;
  -o-transition: opacity .3s ease;
  transition: opacity .3s ease; }

.pdp__awards {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 16%; }

.pdp__emblem {
  display: block;
  width: 100%;
  margin-bottom: 5px; }

.pdp__point-msg {
  position: relative;
  margin: 1rem 0 1.5rem;
  padding-top: 1.625rem;
  color: #5f5f5f;
  text-align: left; }
  .pdp__point-msg .icon {
    position: absolute;
    top: -.25em;
    color: #ccc;
    font-size: 1.025em; }
    .pdp__point-msg .icon:before {
      content: '\ea1b';
      display: inline-block;
      font-family: 'icon';
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      text-decoration: none;
      text-transform: none; }

.pdp__swatches {
  border-top: 1px solid #ddd; }

.pdp__vol {
  overflow: hidden;
  padding-top: .75em;
  border-top: 1px solid #ddd;
  color: #2b2b2b;
  text-align: right;
  margin-bottom: 0.75em; }
  .pdp__vol .volume {
    float: left;
    margin-top: 0.125rem; }
  .pdp__vol .price {
    font-size: 1rem; }

.pdp__shopping {
  position: relative; }
  .pdp__shopping .btn {
    font-size: 1.0625rem;
    padding: 18px 25px; }

.pdp__banners {
  margin-top: 1.25rem; }
  .pdp__banners .swiper-pagination {
    position: absolute;
    left: 20px;
    bottom: 20px;
    width: auto;
    text-align: left; }
    .pdp__banners .swiper-pagination-bullet:only-child {
      display: none; }

.pdp__share {
  overflow: hidden;
  margin: 1.5rem 0 2.25rem;
  text-align: left;
  font-size: 1.625rem; }
  .pdp__share-link {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    float: left;
    width: 3rem;
    color: rgba(0, 0, 0, 0.4);
    line-height: 1;
    text-align: left;
    vertical-align: top; }
    .pdp__share-link:focus, .pdp__share-link:hover {
      color: #000; }
    .pdp__share-link .icon {
      display: block; }
    .pdp__share-link .icon-facebook {
      font-size: 1.375rem; }
    .pdp__share-link .icon-copy-url {
      font-size: 1.25rem;
      padding: 2px 0 0 2px; }

@media (max-width: 59.99em) {
  .pdp__images .swiper-pagination-bullet:only-child {
    display: none; }
  .pdp__shopping {
    margin-bottom: 3.125rem; } }

@media (min-width: 35em) {
  .pdp__images {
    margin-left: -12.5%;
    margin-right: -12.5%; } }

@media (min-width: 45em) {
  .pdp__images {
    margin-left: 0;
    margin-right: 0; }
  .pdp__carousel {
    height: auto;
    padding-bottom: 0;
    overflow: visible;
    margin-left: 0;
    margin-right: 0; }
    .IE .pdp__carousel {
      -webkit-transition: position 0.2s;
      -o-transition: position 0.2s;
      transition: position 0.2s; }
    .pdp__carousel .swiper-wrapper {
      overflow: visible; }
  .pdp__hashtags, .pdp__heading, .pdp__point-msg, .pdp__func, .pdp__swatches {
    max-width: 380px;
    margin-left: auto;
    margin-right: auto; } }

@media (min-width: 60em) {
  .pdp__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    min-height: 610px;
    margin: 0 50px;
    padding: 80px 0 80px 54.16667%;
    text-align: left; } }
  @media all and (min-width: 60em) and (-ms-high-contrast: none), (min-width: 60em) and (-ms-high-contrast: active) {
    .pdp__header {
      height: 456px; } }

@media (min-width: 60em) {
  .pdp__heading {
    margin-top: 0;
    margin-bottom: 0.625rem; }
  .pdp__hashtags {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; }
  .pdp__name-main {
    margin-bottom: 0.75rem; }
  .pdp__images {
    position: absolute;
    left: 10%;
    top: 80px;
    margin-left: 0;
    margin-right: 0;
    width: 380px;
    padding-bottom: 0; }
    .pdp__images .swiper-pagination {
      position: absolute;
      left: -80px;
      top: 50%;
      bottom: auto;
      width: 40px;
      margin: 0;
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%); }
    .pdp__images .swiper-pagination-bullet {
      position: relative;
      width: 100%;
      height: 38px;
      margin: 10px 0 0;
      border: 0;
      border-radius: 0; }
      .pdp__images .swiper-pagination-bullet::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 1px solid #ddd; }
      .pdp__images .swiper-pagination-bullet:hover::before, .pdp__images .swiper-pagination-bullet:focus::before {
        border-color: #000; }
      .pdp__images .swiper-pagination-bullet-active::before {
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        border: 2px solid #000; }
  .pdp__point-msg {
    padding-top: 1.3125rem; }
  .pdp__carousel {
    overflow: hidden; }
  .pdp__share {
    margin-bottom: 0; }
  .pdp__thumb-box {
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%; }
  .pdp__thumb {
    width: 100%;
    margin-top: -5px; }
  .pdp__hashtags {
    margin-left: 20px; }
  .pdp__heading, .pdp__point-msg, .pdp__func, .pdp__swatches {
    margin-left: 30px; }
  .pdp__swatches, .pdp__func {
    width: 100%; } }

@media (min-width: 80em) {
  .pdp__header {
    max-width: 1180px;
    min-height: 700px;
    padding-left: 700px;
    padding-bottom: 80px;
    margin-left: auto;
    margin-right: auto; } }
  @media all and (min-width: 80em) and (-ms-high-contrast: none), (min-width: 80em) and (-ms-high-contrast: active) {
    .pdp__header {
      height: 540px; } }

@media (min-width: 80em) {
  .pdp__images {
    width: 450px;
    left: 13.5%; }
    .pdp__images .swiper-pagination {
      left: -100px;
      width: 50px; }
    .pdp__images .swiper-pagination-bullet {
      height: 50px; }
  .pdp__hashtags {
    margin-left: 50px; }
  .pdp__heading, .pdp__point-msg, .pdp__func, .pdp__swatches {
    margin-left: 60px; } }

.pdp-luminous-live {
  padding: 4.0625rem 0 4.375rem;
  background-color: #f7f7f7; }
  .pdp-luminous-live .func {
    margin-top: 20px; }
  .pdp-luminous-live + .pdp-review {
    margin-top: 3.75rem; }
  @media (min-width: 45em) {
    .pdp-luminous-live .luminous-area {
      width: 510px;
      margin: 0 auto; } }
  @media (min-width: 60em) {
    .pdp-luminous-live {
      padding: 4.6875rem 0 5rem; }
      .pdp-luminous-live + .pdp-review {
        margin-top: 5rem; }
      .pdp-luminous-live .luminous-area {
        width: 930px; } }

.pdp-review .pagination {
  margin-top: 35px; }

.pdp-review .pdp__sub-header {
  max-width: none; }
  .pdp-review .pdp__sub-header + .no-item {
    margin-top: -1.5rem;
    border-top: 0; }

.pdp-review__filter {
  zoom: 1;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4); }
  .pdp-review__filter:before {
    content: '';
    display: block; }
  .pdp-review__filter:after {
    content: '';
    display: table;
    clear: both; }
  .pdp-review__filter .pad--left {
    float: left;
    width: 33.33%; }
  .pdp-review__filter .pad--right {
    float: right;
    width: 66.66%; }
    .pdp-review__filter .pad--right .dropdown::before {
      position: absolute;
      top: 50%;
      left: 5px;
      width: 1px;
      height: 14px;
      margin: -7px;
      background-color: #ddd;
      content: ''; }
    .pdp-review__filter .pad--right .dropdown-popup {
      top: 49px; }
    .pdp-review__filter .pad--right .dropdown-options a {
      overflow: hidden;
      display: block;
      -o-text-overflow: ellipsis;
         text-overflow: ellipsis;
      white-space: nowrap;
      word-wrap: normal; }

.pdp-review__group .dropdown-popup, .pdp-review__skintype .dropdown-popup, .pdp-review__order .dropdown-popup {
  min-width: 155px;
  width: 100%; }

.pdp-review__group .dropdown-selector, .pdp-review__skintype .dropdown-selector, .pdp-review__order .dropdown-selector {
  padding-left: 5px;
  padding-right: 25px;
  border-color: transparent;
  border-bottom: 0;
  background-color: transparent; }
  .pdp-review__group .dropdown-selector:focus, .pdp-review__skintype .dropdown-selector:focus, .pdp-review__order .dropdown-selector:focus {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 1px dotted #444;
    border-bottom: none; }
  .pdp-review__group .dropdown-selector:before, .pdp-review__skintype .dropdown-selector:before, .pdp-review__order .dropdown-selector:before {
    content: '\ea0f';
    display: inline-block;
    font-family: 'icon';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    display: none;
    color: #5f5f5f;
    font-size: 0.625rem;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-transform: scale(0.5) rotate(-180deg);
        -ms-transform: scale(0.5) rotate(-180deg);
            transform: scale(0.5) rotate(-180deg); }
  .pdp-review__group .dropdown-selector:after, .pdp-review__skintype .dropdown-selector:after, .pdp-review__order .dropdown-selector:after {
    content: '\ea0f';
    display: inline-block;
    font-family: 'icon';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    color: #5f5f5f;
    font-size: 0.625rem;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5); }

.pdp-review__group.is-opened .dropdown-selector, .pdp-review__group.is-opened .dropdown-options, .pdp-review__group:hover .dropdown-selector, .pdp-review__group:hover .dropdown-options, .pdp-review__skintype.is-opened .dropdown-selector, .pdp-review__skintype.is-opened .dropdown-options, .pdp-review__skintype:hover .dropdown-selector, .pdp-review__skintype:hover .dropdown-options, .pdp-review__order.is-opened .dropdown-selector, .pdp-review__order.is-opened .dropdown-options, .pdp-review__order:hover .dropdown-selector, .pdp-review__order:hover .dropdown-options {
  border-color: #767676; }

.pdp-review__group {
  display: block;
  width: 100%; }
  .pdp-review__group .dropdown-popup {
    width: 100%;
    margin-top: 0; }

.pdp-review__skintype {
  float: left;
  width: 50%; }
  [data-page^=slankk4] .pdp-review__skintype .dropdown-popup {
    min-width: 180px; }

.pdp-review__order {
  width: 50%; }
  .pdp-review__order .dropdown-popup {
    left: auto; }

@media (min-width: 45em) {
  .pdp-review__filter .pad--left {
    width: 25%; }
  .pdp-review__filter .pad--right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 60%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end; }
    .pdp-review__filter .pad--right .dropdown:first-child::before {
      display: none; }
  .pdp-review__group {
    display: block;
    width: 100%; }
    .pdp-review__group .dropdown-selector {
      display: none; }
    .pdp-review__group .dropdown-popup {
      display: block; }
    .pdp-review__group .dropdown-options {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      background: none;
      border: none; }
      .pdp-review__group .dropdown-options li > a {
        position: relative; }
        .pdp-review__group .dropdown-options li > a:focus::before {
          position: absolute;
          top: 1px;
          left: 1px;
          right: 1px;
          bottom: 1px;
          outline: 1px dotted;
          outline: 1px solid -webkit-focus-ring-color;
          content: ''; }
      .pdp-review__group .dropdown-options li + li::before {
        position: absolute;
        top: 50%;
        left: 5px;
        width: 1px;
        height: 14px;
        margin: -7px;
        background-color: #ddd;
        content: ''; }
      .pdp-review__group .dropdown-options li + li > a {
        padding-right: 0.9375rem; }
      .pdp-review__group .dropdown-options .is-selected > a {
        color: #2b2b2b; }
  .pdp-review__skintype {
    float: left;
    width: 50%; } }

@media (min-width: 45em) and (min-width: 60em) {
  .pdp-review__filter .pad--right {
    text-align: right; }
  .pdp-review__group {
    width: 160px; }
  .pdp-review__skintype, .pdp-review__order {
    float: none; }
    .pdp-review__skintype .dropdown-selector, .pdp-review__order .dropdown-selector {
      padding: 10px 15px; }
    [data-page^=slankk3] .pdp-review__skintype,
    [data-page^=slankk5] .pdp-review__skintype, [data-page^=slankk3] .pdp-review__order,
    [data-page^=slankk5] .pdp-review__order {
      max-width: 160px; }
    [data-page^=slankk4] .pdp-review__skintype, [data-page^=slankk4] .pdp-review__order {
      max-width: 250px; }
  .pdp-review__order {
    width: 50%;
    max-width: 160px; } }

.no-review {
  padding-top: 3.125rem;
  padding-bottom: 0.625rem;
  color: rgba(0, 0, 0, 0.4);
  text-align: center; }
  @media (min-width: 80em) {
    .no-review {
      padding-top: 4.375rem;
      padding-bottom: 1.875rem; } }

.review-list__item {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding-bottom: 10px; }

@media (min-width: 45em) {
  .review-list {
    margin-left: -5px;
    margin-right: -5px; }
    .review-list__item {
      width: 50%;
      padding: 0 5px;
      margin-bottom: 10px; } }

@media (min-width: 60em) {
  .review-list {
    margin-left: -10px;
    margin-right: -10px; }
    .review-list__item {
      width: 33.33%;
      padding: 0 10px;
      margin-bottom: 20px; } }

.review {
  padding: 40px 30px;
  background-color: #fff; }
  .review__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 10px 0;
    line-height: 1; }
  .review__user {
    color: #000;
    overflow: hidden;
    display: block;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal; }
  .review__type, .review__date {
    position: relative;
    margin-left: 9px;
    padding-left: 9px;
    white-space: nowrap; }
    .review__type::before, .review__date::before {
      content: '';
      position: absolute;
      top: 2px;
      left: 0;
      bottom: 2px;
      border-left: 1px solid #ddd; }
  .review__date {
    color: #767676; }
  .review__body {
    overflow: hidden;
    max-height: 130px; }
    .review__body.is-opened {
      max-height: none; }
  .review__p {
    margin-bottom: 0;
    line-height: 1.6;
    word-break: break-all;
    word-wrap: normal; }
  .review__more {
    position: relative;
    margin-top: 4px; }
    .review__more::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      border-bottom: 1px solid; }
  .review__photo-list {
    overflow: hidden;
    margin-top: 10px; }
  .review__photo-item {
    overflow: hidden;
    float: left;
    width: 70px;
    height: 70px;
    margin-right: 10px;
    margin-top: 10px; }
  .object-fit .review__photo {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover; }

.modal-photos.tingle-modal--overflow {
  overflow: hidden;
  padding-top: 0;
  top: -1px; }

.modal-photos .tingle-modal-box {
  max-width: 720px;
  width: 100%;
  height: 100%; }
  .modal-photos .tingle-modal-box__content {
    padding: 0;
    height: 100%; }

.modal-photos .tingle-modal__close {
  top: 15px;
  right: 18px;
  color: rgba(0, 0, 0, 0.4);
  -webkit-transition: 0.1s;
  -o-transition: 0.1s;
  transition: 0.1s; }
  .modal-photos .tingle-modal__close:hover {
    color: #000; }
  .modal-photos .tingle-modal__close:before {
    content: '\ea0b';
    display: inline-block;
    font-family: 'icon';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    font-size: 21px; }

.modal-photos .tingle-modal__closeIcon {
  display: none; }

.modal-photos .tingle-modal__close {
  color: #000; }

@media (min-width: 60em) {
  .modal-photos .tingle-modal-box {
    height: calc(100vh - 160px); } }

.review-photos {
  height: 100%;
  text-align: center; }
  .review-photos__header {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    height: 60px;
    border-bottom: 1px solid #eaeaea; }
  .review-photos__h {
    width: 100%;
    line-height: 60px; }
  .review-photos__area {
    height: calc(100% - 120px);
    background-color: #f7f7f7; }
  .review-photos .swiper-container {
    height: 100%; }
  .review-photos .swiper-wrapper {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center; }
  .review-photos .swiper-slide {
    height: auto; }
  .review-photos .swiper-button-prev, .review-photos .swiper-button-next {
    top: 50%;
    margin-top: -40px;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: rgba(247, 247, 247, 0.6); }
  .review-photos .swiper-button-prev {
    left: -3px; }
  .review-photos .swiper-button-next {
    right: -3px; }
  .review-photos .swiper-button-disabled {
    opacity: .3;
    background-color: transparent; }
  @media (min-width: 60em) {
    .review-photos__header {
      border-bottom: 0; }
    .review-photos__area {
      height: calc(100% - 60px); }
    .review-photos .swiper-container {
      height: 100%; }
    .review-photos .swiper-wrapper {
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center; }
    .review-photos .swiper-slide {
      height: auto; }
    .review-photos .swiper-button-prev, .review-photos .swiper-button-next {
      top: 50%;
      margin-top: -40px;
      padding-top: 10px;
      padding-bottom: 10px;
      background-color: rgba(247, 247, 247, 0.8); }
    .review-photos .swiper-button-prev {
      left: -3px; }
    .review-photos .swiper-button-next {
      right: -3px; }
    .review-photos .swiper-button-disabled {
      background-color: transparent; } }

.review-photo {
  display: block;
  margin: 0 auto;
  max-height: calc(100vh - 60px); }
  @media (min-width: 60em) {
    .review-photo {
      max-height: calc(100vh - 160px - 60px); } }

.rating .icon {
  color: #ddd; }
  .rating .icon:before {
    content: '\ea1e';
    display: inline-block;
    font-family: 'icon';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none; }
  .rating .icon.on {
    color: #000; }

.rating__pad {
  display: inline-block;
  vertical-align: middle; }

.rating__score {
  color: #000;
  font-family: "Arita", "Arita Heiti", "Microsoft YaHei", sans-serif;
  letter-spacing: .05em; }
  .rating__pad + .rating__score {
    margin-left: 1em; }

.rating--with-score {
  margin: 20px 0; }
  .rating--with-score .icon {
    font-size: 0.75rem; }

.pdp {
  padding-bottom: 6.25rem; }
  .pdp .wrapper--8-over-12 .video-box .flexible-obj {
    padding-bottom: 56.09%; }
    .pdp .wrapper--8-over-12 .video-box .flexible-obj--youku {
      padding-bottom: 56.2%; }
  .pdp__section--feature {
    padding-top: 0.375rem; }
  .pdp__section--review {
    padding: 3.75rem 0;
    background-color: #f7f7f7; }
  .pdp__section--info {
    padding-top: 2.5rem;
    overflow: visible; }
  .pdp__section .product-item__link {
    cursor: pointer; }
  .pdp__section .bg--gray0 {
    margin: 0;
    padding-top: 50px;
    padding-bottom: 50px; }
    .pdp__section .bg--gray0 + .bg--gray0 {
      padding-top: 0; }
      .pdp__section .bg--gray0 + .bg--gray0 .ft-hr {
        padding-top: 50px; }
  .pdp__sub-header {
    position: relative;
    max-width: 780px;
    margin: 0 auto 1.25rem;
    text-align: center;
    word-break: keep-all;
    word-wrap: break-word; }
    .pdp__sub-header + .swiper,
    .pdp__sub-header + .item-color {
      margin-top: -0.625rem; }
  .pdp__sub-cap {
    color: #2b2b2b;
    font-family: "Arita", "Arita Heiti", "Microsoft YaHei", sans-serif;
    letter-spacing: .05em;
    text-transform: uppercase; }
    .pdp__sub-cap[lang="zh"] {
      font-family: "Arita Heiti", "Microsoft YaHei", sans-serif;
      font-weight: normal;
      letter-spacing: 0; }
  .pdp__sub-heading {
    display: block;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0.25rem;
    margin-bottom: 1.25rem; }
    .pdp__sub-heading strong {
      font-weight: normal;
      text-shadow: 0.04em 0 0.04em currentColor; }
      @supports (-webkit-touch-callout: none) {
        .pdp__sub-heading strong {
          text-shadow: none;
          font-weight: bold; } }
      .Safari .pdp__sub-heading strong {
        text-shadow: none;
        font-weight: bold; }
    .ft-cloud .pdp__sub-heading {
      margin-left: 0;
      margin-right: 0; }
  .pdp__desc {
    max-width: 670px;
    margin: 1.25rem auto; }
  @media (max-width: 44.99em) {
    .pdp__sub-header br {
      display: none; }
      .pdp__sub-header br.br--show-mob {
        display: block; } }
  @media (min-width: 60em) {
    .pdp__section .bg--gray0 {
      margin: 0;
      padding-top: 70px;
      padding-bottom: 70px; }
      .pdp__section .bg--gray0 + .bg--gray0 {
        padding-top: 0; }
        .pdp__section .bg--gray0 + .bg--gray0 .ft-hr {
          padding-top: 70px; }
    .pdp__section--feature {
      padding-top: 2.5rem; }
    .pdp__section--review {
      padding: 5rem 0; }
    .pdp__sub-header {
      max-width: 780px;
      margin-bottom: 1.875rem; }
    .pdp__sub-cap {
      font-size: 1rem; }
    .pdp__sub-heading {
      margin-top: .2em;
      margin-bottom: 1.875rem; }
    .pdp__desc {
      margin-top: 1.875rem;
      margin-bottom: 2.1875rem; } }

.pdp__nav {
  height: 2.75rem; }
  @media (min-width: 60em) {
    .pdp__nav {
      height: 3.375rem; } }

.pdp__tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 5px;
  padding-right: 5px;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  height: 44px;
  z-index: 90;
  background-color: #fff; }
  .pdp__tabs .tab-link {
    height: 100%;
    padding: 0 10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    white-space: nowrap;
    font-size: 0.9375rem; }
    .pdp__tabs .tab-link + .tab-link {
      margin-left: 0; }
  .pdp__tabs.is-sticky {
    position: fixed;
    top: -1px;
    left: 0;
    right: 0;
    z-index: 100;
    -webkit-transition: -webkit-transform .3s ease;
    transition: -webkit-transform .3s ease;
    -o-transition: transform .3s ease;
    transition: transform .3s ease;
    transition: transform .3s ease, -webkit-transform .3s ease; }
    .scroll-up .pdp__tabs.is-sticky {
      -webkit-transform: translateY(60px);
          -ms-transform: translateY(60px);
              transform: translateY(60px); }
  @media (min-width: 45em) {
    .pdp__tabs {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center; }
      .pdp__tabs .tab-link {
        padding-left: 20px;
        padding-right: 20px; } }
  @media (min-width: 60em) {
    .pdp__tabs {
      height: 54px; }
      .pdp__tabs.is-sticky {
        top: -1px; }
        .scroll-up .pdp__tabs.is-sticky {
          -webkit-transform: translateY(60px);
              -ms-transform: translateY(60px);
                  transform: translateY(60px); }
      .pdp__tabs .tab-link {
        width: 7em;
        font-size: 1rem;
        font-weight: 400; }
        .pdp__tabs .tab-link--active {
          font-weight: 700; } }
  @media (min-width: 80em) {
    .pdp__tabs .tab-link {
      font-size: 1.0625rem; } }

.swatches__header {
  position: relative;
  padding-top: 1.125em;
  margin-bottom: .5em;
  color: #444;
  text-align: left; }

.swatches__toggle {
  position: absolute;
  top: 20px;
  right: 0; }

.swatches__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: -12px;
  padding-bottom: 20px;
  padding-right: 20px; }

.swatches__item {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 44px;
  margin-top: 12px;
  margin-right: 2px;
  padding: 0 1px;
  font-size: 0.875rem;
  text-align: center; }

@media (max-width: 59.99em) {
  .swatches__toggle {
    padding-right: 20px; }
    .swatches__toggle::before, .swatches__toggle::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 0;
      width: 12px;
      border-top: 1px solid;
      border-bottom: 1px solid;
      color: rgba(0, 0, 0, 0.4);
      -webkit-transition: -webkit-transform .2s;
      transition: -webkit-transform .2s;
      -o-transition: transform .2s;
      transition: transform .2s;
      transition: transform .2s, -webkit-transform .2s; }
    .swatches__toggle::before {
      margin-top: -1px;
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%); }
    .swatches__toggle::after {
      margin-top: -2px;
      -webkit-transform: rotate(-270deg);
          -ms-transform: rotate(-270deg);
              transform: rotate(-270deg); }
    .swatches__toggle.is-activated::after {
      -webkit-transform: rotate(0deg);
          -ms-transform: rotate(0deg);
              transform: rotate(0deg); }
  .swatches__box {
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 17px; }
    .swatches__box.is-folded {
      overflow-x: auto;
      overflow-y: hidden; }
      .swatches__box.is-folded .swatches__list {
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap; }
        .swatches__box.is-folded .swatches__list::after {
          content: ' ';
          display: block;
          width: 18px;
          height: 44px;
          -ms-flex-negative: 0;
              flex-shrink: 0; }
      .swatches__box.is-folded .swatches__item {
        width: 44px;
        margin-right: 4px; }
      .swatches__box.is-folded .color-chip__box {
        overflow: hidden;
        width: 44px; }
      .swatches__box.is-folded .color-chip__name {
        position: absolute;
        top: 0;
        left: 100%;
        z-index: -1; }
  .swatches__item {
    width: 25%;
    margin-right: 0;
    -ms-flex-negative: 0;
        flex-shrink: 0; } }

@media (min-width: 60em) {
  .swatches__header {
    padding-top: 0.9em; }
  .swatches__toggle {
    display: none; }
  .swatches__list {
    margin-top: -2px;
    margin-left: -3px;
    margin-right: -32px;
    padding-right: 0; }
  .swatches__item {
    width: 12.5%;
    margin-top: 4px;
    margin-right: 4px; } }

.color-chip {
  display: block; user-select: none;}
  .color-chip__box {
    position: relative;
    display: block;
    text-align: center;
    outline: 0;
    padding: 1px;
    margin: 0 auto; }
    .color-chip__box:hover .color-chip__img, .color-chip__box:focus .color-chip__img {
      outline: 1px solid #767676; }
  .color-chip__img {
    display: block;
    border: 2px solid transparent;
    width: 40px;
    height: 40px;
    margin: 0 auto; }
  .color-chip__name {
    display: block;
    margin-top: 5px;
    color: #767676; }
  .color-chip .is-selected .color-chip__img {
    border-color: #000; }
  .color-chip .is-selected .color-chip__name {
    color: #444;
    font-weight: 700; }
  @media (min-width: 60em) {
    .color-chip__box:hover .color-chip__name, .color-chip__box:focus .color-chip__name {
      width: auto;
      padding: 3px 8px;
      z-index: 10;
      top: 95%;
      background-color: #fff;
      border: 1px solid #2b2b2b;
      color: #2b2b2b;
      -webkit-transform: translateX(-25%);
          -ms-transform: translateX(-25%);
              transform: translateX(-25%);
      font-size: 0.875rem; }
    .color-chip__name {
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
      width: 90%;
      padding: 3px;
      z-index: -1;
      white-space: nowrap;
      font-size: 2px; } }